OverlayBrowse overlay components
Dropdown
Action menu with labels, separators, items, shortcuts, and pop animation.
Live preview
Usage
Adapters:React stableVue stable
index.html
<div class="lm-dropdown">
<button aria-haspopup="menu" aria-expanded="true">Actions</button>
<div class="lm-dropdown-menu" role="menu">…</div>
</div>CSS classes (6)
| Class | Description |
|---|---|
lm-dropdown | Position-relative anchor |
lm-dropdown-menu | Floating menu |
lm-dropdown-item | Each menu item |
lm-dropdown-label | Section header |
lm-dropdown-separator | 1px divider |
lm-dropdown-shortcut | Right-aligned key hint |
React props (2)
| Prop | Type | Default | Description |
|---|---|---|---|
side | top | right | bottom | left | — | — |
align | start | center | end | — | — |
Accessibility
- role='menu' + role='menuitem'.
- Trigger: aria-haspopup='menu' + aria-expanded.
- Arrow keys navigate; Escape closes.
Spotted something wrong? Edit this entry on GitHub.