A button that opens a menu of actions for the item or page around it.
Selector: mui-dropdown-menu
Import
import { DropdownMenu, DropdownTrigger, DropdownItem, DropdownSeparator } from '@mushilu-san/ui/overlays';
PreviewCode
Loading example…
Overview
Dropdown menu wraps a muiDropdownTrigger button and a list of mui-dropdown-item actions. open is a two-way model. Items are role="menuitem", and color="danger" marks a destructive action.
Arrow keys, Home and End move between enabled items. Escape closes the menu and returns focus to the trigger. Tab closes it. Choosing an item closes the menu unless closeOnSelect is off.
When to use
A set of actions for one item, such as Edit, Duplicate and Delete for a row.
A toolbar overflow with secondary commands.
When not to use
Choosing a value that sets a field. Use a select. Use Select instead.
Site navigation with pages. Use a navigation menu. Use Navigation menu instead.
Guidelines
Do
Keep actions as verbs, such as "Duplicate".
Put destructive actions last, separated and in the danger colour.
Don't
Do not nest menus inside menus.
Do not use a menu for a single action. Use a button.
Accessibility
Roles and attributes
Element
Role
Notes
trigger
button
aria-expanded follows the menu state.
menu item
menuitem
aria-disabled when disabled.
separator
separator
Keyboard
Keys
Action
EnterSpaceArrowDown
Opens the menu on the trigger.
ArrowDownArrowUp
Move between enabled items (roving focus).
HomeEnd
Move to the first or last enabled item.
Escape
Closes the menu and returns focus to the trigger.
Tab
Closes the menu.
Disabled items are skipped by the arrow keys.
API
DropdownMenu
Selector: mui-dropdown-menu
Name
Type
Default
Description
closeOnEscape
boolean
true
Closes the menu on Escape and returns focus to the trigger. Default `true`. Accepts attribute presence, e.g. <… closeOnEscape>.
closeOnSelect
boolean
true
Closes the menu after an item is chosen. Default `true`. Accepts attribute presence, e.g. <… closeOnSelect>.
Name
Type
Default
Description
open
boolean
false
Whether the menu is open. Two-way bindable with `[(open)]`.
Name
Type
Description
opened
void
Emits when the menu opens.
closed
void
Emits when the menu closes, however it was closed.
CSS parts
::part(panel)
::part(root)
DropdownTrigger
Selector: [muiDropdownTrigger]
CSS parts
::part(trigger)
DropdownItem
Selector: mui-dropdown-item
Name
Type
Default
Description
color
'danger' | 'default'
'default'
Colour of the item: `default` or `danger` for destructive actions. Default `default`.
disabled
boolean
false
Disables the item. It is skipped by the arrow keys. Accepts attribute presence, e.g. <… disabled>.
shortcut
string | undefined
—
Keyboard shortcut shown on the right, for display only.
hasIcon
boolean
false
Reserves space on the left for an icon in a `slot="icon"` element. Accepts attribute presence, e.g. <… hasIcon>.
Mushilu-San UI