Usage
A dropdown menu is used to display a list of actions. It must be triggered by another component, like a button or icon button.
Best practices
Use a dropdown menu when you have more than 5 actions to display or the space is limited. Otherwise, use button group.
Do not use a dropdown menu to hide primary actions. They must never be hidden behind a dropdown menu.
Do not use a dropdown menu as a form input. Use the select component instead.
Dropdown items and groups
Dropdown menus support section dividers and headers for grouping actions and adding clarity.
Group actions based on related categories to make them easier to scan.
Do not use the dropdown menu for any filtering purposes, and do not include components other than dropdown items.
List items in a logical order, for instance, sorted by frequency of use.
Leading and trailing icons
Leading and trailing icons are placed at the start or end of the dropdown item and, as the icons that are placed in buttons, they should be used consciously.
Use icons for affordance clarity, to indicate status, or highlight the action that will be performed.
Don’t use icons for decorative purposes or that don’t portray the action. In those cases might be better to use text only.
Don’t mix trailing and leading icons inside the group. Be consistent to ensure scannability.
Examples
Live Preview
Props
Fetching props...
Slots
Fetching slots...
Events
Fetching events...