Menu bar item
A top-level button of a MenuBarComponent, button[nol-menu-bar-item], which shows its label and opens its menu through MenuTriggerDirective. Its CDK menu item's disabled input and triggered output keep those names on it. Focusing it, such as from a key that moves focus into the bar, makes it the bar's active item, so the arrow keys continue from it.
Examples
Loading…
States
Loading…
API
Selector button[nol-menu-bar-item]
Import from @noldova/ui.components.angular
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
label | string | Required | The item's text, which type-ahead in the bar also matches. |
Accessibility
| Key | Action |
|---|---|
| Enter | Opens the item's menu with its first checked row, or else its first row, focused, or closes it. |
| Space | Opens or closes the item's menu as Enter does. |
| Arrow Down | Opens the item's menu with its first checked row, or else its first row, focused. |
| Arrow Up | Opens the item's menu with its first checked row, or else its last row, focused. |
| A letter | In the bar, moves to the next item whose label starts with what was typed. |
| Escape | Closes the item's menu and gives the focus back to the item. |
Each item is a native button with the menuitem role, named by its label; type-ahead in the bar matches the label.
It is marked aria-haspopup="menu" and reports aria-expanded while its menu is open.
A disabled item is marked aria-disabled and stays focusable, so the arrow keys still reach it.
Specification
Loading…