Menubar primitive
Headless Menubar: the behavior, keyboard support and ARIA of the WAI-ARIA Menubar pattern, with no styles.
@ndop/primitives/menubar- WAI-ARIA: Menubar
Import
Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Menubar is built on this one.
import { NdMenubar, NdMenubarTrigger } from '@ndop/primitives/menubar';Accessibility
Implements the Menubar pattern of the WAI-ARIA Authoring Practices.
Keyboard
Keys the component handles.
| Key | Action |
|---|---|
| Tab | Moves focus into the menubar, to its first trigger; from a trigger, out of the menubar. |
| ArrowRightorArrowLeft | Moves focus to the next or previous trigger, wrapping; if a menu is open, opens that trigger's menu instead. |
| ArrowDown | On a trigger, opens its menu and focuses its first item. |
| EnterorSpace | On a trigger, opens its menu and focuses its first item. |
| Escape | Closes the open menu and returns focus to its trigger. |
Focus
- The menubar is one tab stop, whose focus goes to its first trigger.
- Closing a menu returns focus to its trigger.
- While one menu is open, hovering another trigger opens its menu.
Right-to-left
In right-to-left layouts, the bar runs from right to left: ArrowLeft moves to the next trigger and ArrowRight to the previous one, and menus align to the trigger's right edge. Direction comes from the app's Directionality: the document's dir, or a CDK [dir] directive.
API reference
NdMenubar
[ndMenubar]role menubarfrom @ndop/primitives/menubarA menubar: the WAI-ARIA Menubar pattern, a horizontal bar of menus such
as a desktop app's File and Edit menus, composing the CDK's CdkMenuBar
(ADR-0004, amendment 3). It is one tab stop; the arrow keys move between
its triggers. Name it with aria-label or aria-labelledby.
Manages aria-orientation, tabindex.
NdMenubarTrigger
[ndMenubarTrigger]role menuitemfrom @ndop/primitives/menubarOne menu of a NdMenubar: a role="menuitem" that opens the menu
in the ng-template it's given, composing CdkMenuItem and
CdkMenuTrigger. The menu's parts are @ndop/primitives/menu's. Use a
div: on a button, browsers turn Space into a click, which would close
the menu it just opened.
Manages aria-haspopup, aria-expanded, aria-controls.
| NdMenubarTrigger binding | Type | Default |
|---|---|---|
[ndMenubarTrigger]The ng-template of the menu it opens. | TemplateRef<unknown> | null | null |
[side]Side of the trigger the menu opens on, before flipping to fit. | 'start' | 'end' | 'bottom' | 'top' | 'bottom' |
[align]Alignment of the menu along that side. | 'start' | 'end' | 'center' | 'start' |
[sideOffset]Gap between the trigger and the menu, in pixels. | number | 8 |
| Data attribute | Values |
|---|---|
data-state | — |