Dropdown

A dropdown menu allows the user to choose an option or action from a contextual list. The source of the dropdown is usually a button.

Usage

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

Action ArtBusinessScienceMathematics

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

Select OptionSan FranciscoAustinParisSeattle

Select boxes present a list of options that the user can choose from and apply to an input field.

Anatomy

Toggle

Use a button for the toggle. The button can contain either text or an icon plus text.

Menu Items

Keep the text for menu items short and concise. Long menu items are truncated from the end and an ellipsis added.
Order menu items by usage, except for destructive actions, which belong at the bottom.

Header and Dividers

Headers and dividers can be used to organize a longer list of items.

Behavior

Clicking on the toggle (button) 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.

States

Items in the dropdown menu have hover and click states.

Nested Menus

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.
The best practice is to limit menus to three levels, which would be the root menu plus up to two levels of nested menus.

Interaction for nested menus

With a mouse, the user clicks a category menu item to reveal a nested menu. The category (or group) name stays in selected state to serve as a breadcrumb.
Clicking outside the menu dismisses all menus.

Placement for nested menus

Default placement and stack order

By default, a nested menu pops up on the right side of its root menu.

Small screen / responsive placement and stack order (<544px)

If screen space isn’t available to the right of the root menu, the nested menu appears on the left side. If there is a second nested menu, it appears to the right of the first nested menu, creating a zig-zag pattern.

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 an aria-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 role menuitem.
• If the menu uses headings, the heading should be used as an accessible description for each related item.
• A visual element with role separator can be used between groups of items within a menu. The separator can not receive input focus and is not interactive.
• An element that is not a menu item inside the menu should have the aria-hidden attribute set to true.
• A menu item should not use the disabled attribute so disabled items can receive input focus. Instead, use [clrDisabled] to add the disabled visual style and ARIA attribute when needed.

Keyboard Interaction