Menu
stable 3.6 kB<hk-menu>A menu that nests. Submenus open on hover and on keyboard focus, and the panel flips when it would run off the viewport. The trigger is a slot rather than a fixed button: a burger by default, since that is what a menu usually hangs off, with a label or both where the word carries meaning the glyph does not — and an accessible name either way.
#dropdown#context
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| items | HkMenuItem[] | [] | Menu tree. An item with children renders a submenu. |
| placement | 'bottom-start' | 'bottom-end' | 'right-start' | 'bottom-start' | Preferred anchor; flips when it would overflow. |
| trigger | 'icon' | 'label' | 'both' | 'icon' | A burger by default, since that is what a menu usually hangs off. Whichever is chosen the button keeps an accessible name. |
| triggerLabel | string | 'Actions' | Text for the label and both triggers, and the aria-label for the icon one. |
| triggerIcon | string | 'burger' | Glyph for the icon trigger. The burger animates into an X while open. |
| closeOnSelect | boolean | true | Dismisses the whole menu after a leaf is chosen. |
Outputs
selectEventEmitter<HkMenuItem>Emits the chosen leaf item.
Keyboard
- ↑ / ↓ Moves through items
- → Opens a submenu
- ← Closes the submenu and returns to the parent
- Enter Activates the item
- Escape Closes the menu and restores focus to the trigger
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-menu-bg | #ffffff | Panel background. |
| --hk-menu-danger | #dc2626 | Colour for items marked danger. |
Accessibility
- Roles are menu and menuitem, with aria-haspopup on anything that opens a submenu.
- Focus returns to the trigger on close, so tab order is never lost.
- Destructive items are marked in text and colour, not colour alone.