Menu bar
A horizontal menu bar, nol-menu-bar, holding MenuBarItemComponent buttons. The arrow keys move between its items, and while one of its menus is open, pointing at another item opens that item's menu instead.
Examples
Loading…
States
Loading…
API
Selector nol-menu-bar
Import from @noldova/ui.components.angular
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
label | string | null | The bar's accessible name, or null, the default, for none. |
Accessibility
| Key | Action |
|---|---|
| Tab | Moves the focus into the bar and then past it: the bar is one Tab stop. |
| Arrow Right | Moves to the next item; in an open menu, on a row that opens no submenu, opens the next item's menu. In a right-to-left region, Arrow Left does this. |
| Arrow Left | Moves to the previous item; in an open menu that is no submenu, opens the previous item's menu. In a right-to-left region, Arrow Right does this. |
| Arrow Down | Opens the item's menu with its first checked row, or else its first row, focused. |
| Escape | Closes the open menu and gives the focus back to its item. |
The bar has the menubar role and the horizontal aria-orientation, and is named by its label, set as aria-label.
Each item has the menuitem role, is marked aria-haspopup="menu" and reports aria-expanded; the menus it opens have the menu role.
Left and Right follow the writing direction of the bar's own region, so a bar in a dir="rtl" region of a left-to-right page swaps them, in the bar and in its open menus.
Specification
Loading…