Menu
A menu panel, nol-menu: the root element of a template that MenuTriggerDirective or ContextMenuTriggerDirective opens. It gives its MenuItemComponent rows the menu role, arrow-key and type-ahead navigation, and keeps a submenu open while the pointer moves toward it. Until the pointer first moves, a pointer resting over the menu highlights no row, so a menu that opens under a still pointer starts unhighlighted; the first move highlights the row under the pointer. A menu taller than the room beside its trigger scrolls. An Escape already marked handled, as a tooltip marks the one that hides it, closes nothing.
Examples
Loading…
States
Loading…
API
Selector nol-menu
Import from @noldova/ui.components.angular
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
minWidth | number | null | The width in rem below which the menu never narrows, such as 18 for a settings menu, kept within the overlay bounds' width less 1rem; or null, the default, for a menu sized to its rows. |
Accessibility
| Key | Action |
|---|---|
| Enter | On the trigger, opens the menu with its first checked row, or else its first row, focused; on a row, runs it and closes the menu. |
| Space | On the trigger, opens the menu as Enter does; on a row, runs it and closes the menu. |
| Arrow Down | On the trigger, opens the menu as Enter does; in the menu, moves to the next row. |
| Arrow Up | On the trigger, opens the menu with its first checked row, or else its last row, focused; in the menu, moves to the previous row. |
| Home | Moves to the menu's first row. |
| End | Moves to the menu's last row. |
| A letter | Moves to the next row whose label starts with what was typed. |
| Escape | Closes the menu and gives the focus back to its trigger; an Escape that hid a row's tooltip first closes nothing. |
| Tab | Closes the menu and gives the focus back to its trigger. |
The menu has the menu role; name it with aria-label, as these examples do.
Its trigger, the element that uses nolMenuTriggerFor, is marked aria-haspopup="menu" and reports aria-expanded while the menu is open.
Its rows have the menuitem role, or menuitemcheckbox or menuitemradio with aria-checked while they can be checked; a separator has the separator role and takes no focus.
A menu kept on the page is one Tab stop, which gives the focus to its first row; the arrow keys then move between its rows as in a menu that opens.
Specification
Loading…