UI Elements

Dropdown menu allows user to select one value from a series of options

Dropdown menu allows user to select one value from a series of options.

4.5.1 Types

We've identify the mainly two types of dropdown menu, which are listed as below.

  • Select Dropdown Menu

In a form component when its required to choose from multiple values, select menu will be used.

  • Navigation Specific Dropdown Menu

In the navigation when its required select the action from the multiples choices, this menu will be used.

Types of Dropdown Menu
Fig 4.5.1 Types of Dropdown Menu

4.5.2 Consideration

There are certain guidelines once must take care while adopting dropdown menu which are listed below.

  • Downside arrow at the right side of select menu will identify the dropdown menu associated with select field.
  • Downside arrow icon image will be of 8px in size and will be at 14px from the top, bottom and right side border of the select menu.
  • Select menu will have 35px height and place holder will be of 14px in font size, placed from 10px margin from the left border of select menu. It will have 1px border with color Gray(#d8d8d8)  .
  • Dropdown placeholder will have 1px border around with color Gray(#d8d8d8)   & background will be White(#ffffff)  , each choice in place holder will have 35px height, 14px font size & color for the non-selected choice will be DarkGray(#5c5c5c)  . It will also have 1px border of color LightGray(#e6e6e6)   top/bottom as a divider between choices.
  • Dropdown menu in select menu filed if have more than 5 records than a vertical scrollbar will be introduced..
  • Dropdown menu can consist text or icon based choices.
  • Dropdown menu associated with label when used in form control..
  • Loader image will take place within dropdown when values will come dynamically. In such case, loading more content will take place when user will scroll up to the last records with in dropdown.
  • Search with in Dropdown will always start from the prefix. .
Select Dropdown Menu
Fig 4.5.2a Different parameters of Select Dropdown Menu
  • In navigation specific dropdown menu, placeholder will have White(#ffffff)   color background without border. It will also have Black(#000000)   color shadow with 20% opacity. Choices inside will be placed at 15PX margin from the left border and vertical center. While drodpdown menu with buttons choices inside will be placed at 10PX.
  • In navigation specific dropdown menu, each choice will have 35px height, non-selected choice will have DarkGray(#5c5c5c)   color & it can also have icon image of 16px with the same DarkGray(#5c5c5c)   color. Choice will have 14px font size. The distance between choice and icon image will be 10px.
  • In navigation specific dropdown menu, if choice will have another set of choices than, the parent item/choice will have arrow image icon placed at the right corner of that perticular choice at a distance of 15px from the border of the place holder. This icon image will be center aligned vertically to the choice.
  • In navigation specific dropdown menu, dropdown menu should be of 2 level max.
  • In an icon based action dropdown menu each choice has 30px height, distance between icon and text will be 10px and same will be between icon and border of the place holder.
  • Navigation specific dropdwon menu used in OPS can have related choices grouped together. As shown in the Fig 4.5.1. In such all other properties will remain same but height for the choice will be 30PX and each group will be divided by 1PX divider with color LightGray(#e6e6e6)  .
  • Dropdown menu can also appear on button as shown in the the Fig 4.5.1, here each choice will have 30PX height and wil be divided by 1PX divider with color LightGray(#e6e6e6)  .
  • Dropdown menu will open either by touch or by click.
Navigation Specific Dropdown Menu
Fig 4.5.2b Different parameters of Navigation Specific Dropdown Menu

4.5.3 Behaviour

While using dropdown, there are certain behaviour which will take place when user perform any action on drop- down element. Below are the list of all common user behaviour.

Normal State:

Normal is a state when there is no movement of the mouse over select menu or no touch to the selection occur. Below are the design specification.

  • Select Menu
  • Background: White(#ffffff)  
  • Border: Gray(#d8d8d8)  
  • Font Color: DarkGray(#5c5c5c)  
  • Dropdown Arrow: NavyBlue(#120e5b)  
Normal state of Select Dropdown Menu
Fig 4.5.3a Normal state of Select Dropdown Menu
  • Navigation Specific Dropdown Menu

Its behaviour properties is same as described in button & navigation section.

Normal state of Navigation Specific Dropdown Menu
Fig 4.5.3b Normal state of Navigation Specific Dropdown Menu

On Focus State

When user place the cursor either by mouse or by touch or or roll the mouse over it, on focus behaviour will occur. Below are the design specification.

  • Select Menu
  • Background: White(#ffffff)  
  • Border: SkyBlue(#2991d6)  
  • Font Color: DarkGray(#5c5c5c) 
  • Dropdown Arrow: : NavyBlue(#120e5b)  
  • Shadow: SkyBlue(#2991d6)  , 30% opacity
Focus state of Select Dropdown Menu
Fig 4.5.3c Focus state of Select Dropdown Menu
  • Navigation Specific Dropdown Menu
  • Its behaviour properties is same as described in button & navigation section for the on focus/hover state.

Active State

When user place the cursor either by mouse or by touch, active state behaviour will occur. Below are the design specification.

  • Select Menu Properties
  • Background: White(#ffffff)  
  • Border: Gray(#d8d8d8)  
  • Font Color: DarkGray(#5c5c5c)  
  • Dropdown Arrow: NavyBlue(#120e5b)  
  • Dropdown Menu Placeholder Properties
  • Background: White(#ffffff)  
  • Border: Gray(#d8d8d8)  
  • Choice: DarkGray(#5c5c5c)  
  • Divider: LightGray(#e6e6e6)  
  • Hover over choices in Dropdown Menu Properties:
  • Background: LightSkyBlue(#e0f3ff)  
  • Choice: SkyBlue(#2991d6)  
  • Divider: LightGray(#e6e6e6)  
Active state of Select Dropdown Menu
Fig 4.5.3d Active state of Select Dropdown Menu

Navigation Specific Dropdown Menu

In the active state all properties will remain same as select dropdown menu in active state, the only case if there is an icons associated with Choice, its color will also change to SkyBlue(#2991d6)  .

Active State of Navigation Specific Dropdown Menu
Fig 4.5.3e Active State of Navigation Specific Dropdown Menu

Selected State

Selected state will occur when user will select on value from dropdown. In such case, selected value will appear as a place holder in the select menu & the select menu properties will remain same as normal state, while in navigation specific dropdown it will lead user to that particular page or relative action will occur, & the parent link will take active state of navigation.

Disable State

Disabled state will be used when user cannot perform any action on dropdown. In this case Font color for the label will be DimGray(#c5c5c5)   & background for the select menu will be LightGray(#e6e6e6)  .

Disable state of Select Dropdown Menu
Fig 4.5.3f Disable state of Select Dropdown Menu

Responsive behaviour for Navigation Specific Dropdown Menu

In smaller device the behaviour of the navigation specific dropdown menu will change as explained below.

Responsive Behaviour of Navigation specific Dropdown Menu
Fig 4.5.3g Responsive Behaviour of Navigation specific Dropdown Menu
  • In its responsive behaviour, menu will collapse and will take an icon based button state. Clicking on it, it will expand, and main parent menu will become active, in this state its design specification will remain same as desktop except each choice will be divided by 1PX divider with color Gray(#d8d8d8)  . It will work as an accordion menu, so it will have upside/downside arrows. As shown in Fig 4.5.3h
Collapsing behaviour Normal State
Fig 4.5.3h Collapsing behaviour Normal State
  • Clicking on any parent link will open first level menu, here the parent link will become active with same properties as desktop but arrow will be in upside.The design specification for the choice will change, the placeholder background for the first level dropdown menu will be White(#ffffff)   and choice font color will be DarkGray(#5c5c5c)   and font size will be 13PX. Each choice in this level, will be divided by 1PX divider with color LightGray(#e6e6e6)  . As shown in the Fig 4.5.3i.
Active state of first level
Fig 4.5.3i Active state of first level.
  • Clicking on any choice of the first level menu will open second level menu, where as first level clicked link will become active, In its active state, arrow will be upside and background will be LightSkyBlue(#e0f3ff)   & font color will be SkyBlue(#2991d6)  .The design specification for the choice will change, the placeholder background for the second level dropdown menu will be White(#ffffff)   and choice font color will be DarkGray(#5c5c5c)   and font size will be 13PX. Each choice in this level will be listed without any devider. As shown in the Fig 4.5.3j.
Active state of second level
Fig 4.5.3j Active state of second level.

4.5.4 Usage

A dropdown menu can be used in multiple ways in order to display information. Below are the use cases applicable to drop-down.

  • Single Selection

Use single selection when only one option needs to be selected from given list of choices.

Single Selection
Fig 4.5.4a Single Selection
  • Multiple Selection

Use multiple selection when more than one value needs to be selected from given list of choices.

Multiple Selection
Fig 4.5.4b Multiple Selection
  • Search In Selection

When there are many choices to choose from, user can even type the keyword & search the specific choice. Search with in Dropdown will always start from the prefix. When there are 100s of choices, one should use the search in menu section. Using it user can select single selection and can select the multiple choices.

Search In Selection
Fig 4.5.4c Search In Selection
  • Navigation specific dropdown menu

This type of dropdown menu normally used on Icons/text based & icon based buttons, this also can be used in the site specific navigation menu as in header we have a site menu where we can use dropdwon when we will have mutiple pages under single link.

Navigation specific dropdown menu
Fig 4.5.4d Navigation specific dropdown menu