Dropdown
Dropdown menu (Material's MenuAnchor/PopupMenuButton, Lozenge-flavoured), zero JS. Preferred recipe: a trigger button with popovertarget opens a [popover].dropdown-menu anchored to it (implicit-anchor positioning) — the platform supplies open/close, light-dismiss, Esc, top-layer, and focus return. Items close the menu on activation via popovertarget + popovertargetaction="hide"; plain links just navigate. Legacy recipe: .dropdown wrapper with a class-toggled .open. Optional /lozenge-sprinkle.js adds arrow-key roving focus and typeahead.
Root: .dropdown-menu on <div>
Example
<button class="btn" popovertarget="m1">Actions</button><div id="m1" popover class="dropdown-menu"><div class="dropdown-heading">Move to</div><button class="dropdown-item" popovertarget="m1" popovertargetaction="hide">Done</button><div class="dropdown-divider"></div><a class="dropdown-item danger" href="#">Delete</a></div>Contract
Variants & modifiers
| Class | Axis | Rules |
|---|---|---|
dropdown-menu-end | placement | optional · exclusive |
dropdown-menu-end | modifier | optional |
Structure
| Selector | Required | Description |
|---|---|---|
.dropdown-item | required | One or more items (a or button). Optional .dropdown-heading, .dropdown-divider, .dropdown-item-description inside items. |
Accessibility
| On | Attribute | Level | When |
|---|---|---|---|
.dropdown-menu | id | recommended | popover recipe: the id popovertarget points at |
The popover recipe inherits platform semantics: Esc closes, focus returns to the invoker, outside interaction light-dismisses. Tab/Shift-Tab traverse items natively; add /lozenge-sprinkle.js for ArrowUp/Down/Home/End + typeahead (the full ARIA menu feel). Use button items for actions and a items for navigation; mark the current choice with .selected.
Nesting
Allowed in:
anywhere a trigger button can live; nested inside a parent .dropdown-menu for submenus (menubar recipe)
Never inside (or containing):
.dropdown-menu .flag.dropdown-menu dialog.modal