Dropdown
A layered menu surface for grouped actions and navigation. Uses Floating UI positioning, supports nested submenus, and accepts custom trigger content via slot.
Keyboard interaction
| Key | Action |
|---|---|
| Tab / Shift + Tab | Move focus into and out of the trigger and menu items. |
| Enter / Space | Open or close the menu from the trigger. |
| ArrowDown | Open menu and move focus to first item. In menu, move to next item. |
| ArrowUp | In menu, move to previous item. |
| Home / End | Jump focus to first/last interactive item in the open menu. |
| Escape | Close current menu and move focus back to trigger. |
| ArrowRight | Open submenu when submenu mode is enabled. |
| ArrowLeft | Close submenu and return focus to submenu trigger. |
Screen reader behaviour
Dropdown trigger exposes aria-haspopup="menu" and keeps aria-expanded in sync with open state. The panel renders with role="menu".
| Attribute / Property | Value / Behaviour |
|---|---|
Trigger aria-haspopup | menu |
Trigger aria-expanded | true | false based on open state |
Trigger aria-disabled | "true" when disabled |
Panel role | menu |
Items role | menuitem (recommended on custom items) |
WCAG 2.2 compliance
✓
2.1.1 Keyboard — APass
All core menu actions (open, close, move focus, select) are operable by keyboard.
✓
2.4.3 Focus Order — APass
Focus progression in trigger and menu remains predictable with arrow-key support.
✓
2.4.7 Focus Visible — AAPass
Interactive trigger and menu items expose visible focus styles.
✓
4.1.2 Name, Role, Value — APass
Menu semantics are exposed via role and aria-expanded synchronization.