Dropdown
Usage
- Default line height is 30 px; 36 px for x-small breakpoint (<544px) touch targets
- Headers and or dividers may be used to organize a longer list of items
- Menu width: Minimum 168 px; Maximum 336 px
- Items in the list have hover and click states
A dropdown menu is a contextual list that allows the user to choose an option that take an immediate action or navigate the user to another view. The source of the dropdown is usually a button.

Dropdown vs Select

Dropdown menus present a list of options that take an immediate action or navigate the user outside of the current context.


Select boxes present a list of options that the user can choose from and apply to an input field.
Behavior
- Clicking on the toggle opens the dropdown
- By default, selecting a menu item or clicking outside the menu dismisses the menu. You can change this behavior to keep the menu open on item selection
Placement
By default, a dropdown opens from the bottom of the toggle, along the left side. You can change the placement by using one of the eight direction classes.

Recommendations
- Use a button for the toggle. The button can contain either text or an icon
- Order menu items by usage, except for destructive actions, which belong at the bottom
- Keep the text short and concise. Long menu items are truncated from the end and an ellipsis added
- Nested menus may be used to organize long lists of items into categories
- Limit menus to three levels: Root menu plus up to two levels of nested menus
- Disable a menu item if:
- It can apply in a different context
- The user doesn’t have permissions for the action
- An applicable object is not currently selected
Nested Menu
Nested menus are an extension of dropdown menus. They save screen space by organizing a long list of items into categories that the user can click to reveal deeper levels.
Description
- With mouse: Click group name to reveal nested menus. Group name stays in selected state to serve as a breadcrumb
- Clicking outside of the menu dismisses all menus

Placement
Accessibility
Clarity Angular component follows these guidelines:
- A dropdown menu should have an element with the role
button
that opens the menu. - The element with the
button
role should also have anaria-expanded
attribute which is set to true when the dropdown menu is open. - The items should be inside an element with the role
menu
, and have the rolemenuitem
. - If the menu uses headings, the heading should be used as an accessible description for each related item.
- A visual element with role
separator
may be used between groups of items within a menu. The separator is not focusable or interactive. - An element that is not a menu item inside the menu should have the
aria-hidden
attribute set totrue
. - A menu item should not use the
disabled
attribute so disabled items can be focusable (opens new window). Instead, use[clrDisabled]
to add the disabled visual style and ARIA attribute when needed. It is up to the application to ensure that the disabled item is not activatable (opens new window).
Interaction
Enter, Space, Down Arrow on the menu button | Opens the menu and focuses on the first item |
---|---|
Up Arrow on menu | Focus on the previous item, or the last item if currently on the first one |
Down Arrow on menu | Focus on the next item, or the first item if currently on the first one |
Right Arrow on a menu item with submenu | Opens the submenu and focuses on the first item |
Left Arrow on a submenu | Closes the submenu and focuses on its parent item |
Esc | Closes the menu and focuses on the trigger (in the case of submenu the trigger is its parent item). |
Code & Examples
Clarity UI Component
Default (bottom-left)
Bottom-right
Icon toggle
CSS Classes
.dropdown
This class is a wrapper class around the .dropdown-toggle
and th .dropdown-menu
.dropdown-toggle
Extend this class on a button, icon or text link clicking on which the dropdown menu will be activated
.dropdown-menu
A required wrapper intended to contain the dropdown menu. Items in the menu should extend the .dropdown-header
or .dropdown-item
class. .dropdown-divider
can be on a block element used to separate item groups. .active
class with .dropdown-item
adds a different styling for selected elements. Add the .disabled
class to dropdown items to style them as disabled.
.open
A class to open the dropdown menu. Must be applied with .dropdown
The following classes when extended along with .dropdown will open the menu in the respective directions:
- .bottom-left
- .bottom-right
- .top-left
- .top-right
- .left-bottom
- .left-top
- .right-top
- .right-bottom
If used in one of the nested menus (that is, not the root level .dropdown), only the following classes are valid:
- .bottom-left
- .bottom-right
- .top-left
- .top-right
Angular Component
The dropdown component uses the *clrIfOpen
structural directive (detailed documentation coming soon) on the menu to indicate clearly that the menu is only present in the DOM when open. We heavily recommend using it for many reasons: better performance, making the intent clear in your own templates, and following a more natural lifecycle for any directives or components inside of the menu.
If for some reason this behavior was not the one you wanted, we also support the dropdown menu without a *clrIfOpen
directive on it. It will be created eagerly when the dropdown itself initializes, and will not be destroyed or recreated until the dropdown itself is. Please make sure you know exactly why you are omitting this directive if you end up doing so.