View in Storybook
Anatomy
DropdownMenus are triggered when a user interacts with a Button, Select or other action components. They offer more complex combinational list items than our Context menus do.
- Header (optional): Contains titles and supporting icons and action buttons.
- Slots: Typically populated with our ListItem component but can be used for other suitable components.
- Footer (optional): Used to show a maximum of 2 action items, typically a button to clear selected items in a list.
As a rule, in any dropdown only the header or search can be displayed at once, but never together.
- Search (optional): Ability to find specific items in a list or to add a new item.
Types
Our dropdowns can consist of a number of different components, displayed in multiple ways. The majority of dropdowns will show selectable items, flexible enough to display various combinations of nested components.
Tier 1
Single line items that can be selectable.
Tier 2
List items that can be nested inside folders within dropdowns.
Usage
Submenus
Submenus are activated when more than one option is available from a selected item. Items that have submenus indicate this with a chevron arrow onHover. A maximum of 3 menus can be displayed at any one time.
Nested
An additional dropdown can also be nested within a parent dropdown but these should be used sparingly and only when necessary.
Motion
Each menu has an identical motion when being activated by users. It is offset above the action item and moves down upon reveal.
Dimensions
Although Dropdown does not have a specific fixed rule for menu widths, we recommend using a minimum of 240px and a maximum of 360px in the product for optimal content legibility.
Best practice
- Dropdown menus are typically used when you have 5-15 items to choose from, although longer lists are possible. They are used for navigation or commands, where an action is initiated based on the selection.
- Although the menu has up to 20 items available, you do not have to use them all. Some of these slots can be populated with Search, Select or other components that could be useful in menus.
- When including sub headings to categorize groups of list items, use our Foreground Level 2 grey to add that distictive separtation.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ When organizing dropdown menu items, sort the list in a logical order by putting the most selected option at the top. |
🚫 Use for hiding primary actions since they should be visible by default. |
|
✅ Only display either a Header or Search inside a dropdown menu |
🚫 Nest elements or components other than the ListItem or Select. |
|
✅ Use only 2 actions in a dropdown Footer, typically a Button and/or a Switch |
|
Also see