API reference
Headless Menubar is the primitive navigation surface. You own the markup and panel placement, while the directives handle roving focus, menu handoff, and cross-menu keyboard flow.
tngMenubar
Applies menubar semantics to the host and manages the top-level roving tabindex state across tngMenubarItem descendants.
Primitive composition
html
<div tngMenubar aria-label="Workspace commands">
<div class="menubar-item-shell">
<div tngMenu #fileMenu="tngMenu" aria-label="File menu">
<button type="button" tngMenuItem tngMenuItemValue="Create document">New</button>
</div>
<button type="button" tngMenubarItem [tngMenubarMenu]="fileMenu">File</button>
</div>
</div>
| Input | Type | Details |
|---|---|---|
loop | boolean | Wraps horizontal focus from last item to first and vice versa. Defaults to true. |
| Host attributes | role, aria-orientation, data-slot | Emits role="menubar", horizontal orientation, and data-slot="menubar". |
tngMenubarItem
Marks a focusable top-level trigger and links it to an optional owned tngMenu.
| Input / Attr | Type | Details |
|---|---|---|
[tngMenubarMenu] | TngMenu | null | Owns the menu panel opened by click, Enter, Space, or the open-arrow keys. |
tabindex | 0 | -1 | Managed by the primitive so only one enabled top-level item is tabbable at a time. |
aria-haspopup, aria-controls, aria-expanded | Reflected attrs | Added automatically when an owned menu exists and updated as the menu opens or closes. |
aria-disabled | 'true' | null | Disables the trigger in roving focus, typeahead, and menu ownership flow. |
Owned menu link
Menubar reuses the headless tngMenu primitive for its panels. Menus can contain regular items, labels, separators, and nested submenus.
Nested submenu wiring
html
<div tngMenu #fileMenu="tngMenu" aria-label="File menu">
<button type="button" tngMenuItem [tngMenuItemSubmenu]="importMenu">Import…</button>
<div tngMenu #importMenu="tngMenu" aria-label="Import submenu">
<button type="button" tngMenuItem tngMenuItemValue="Import from CSV">CSV file</button>
</div>
</div>
| Directive | Purpose | Key inputs |
|---|---|---|
tngMenu | Owns menu panel focus order, open state, and typeahead inside the panel. | loop, disabled, closeOnSelect |
tngMenuItem | Selectable command row or submenu trigger inside the panel. | tngMenuItemValue, disabled, [tngMenuItemSubmenu] |
tngMenuGroupLabel, tngMenuSeparator | Structural helpers for grouped commands and visual separation. | No inputs |
Keyboard contract
Menubar owns top-level keyboard semantics and coordinates with the owned menu so focus stays predictable when panels open, close, or hand off to adjacent triggers.
Top-level keyboard baseline
text
ArrowLeft / ArrowRight Move across top-level menubar items
ArrowDown Open owned menu and focus first enabled item
Home / End Jump to first / last enabled top-level item
Escape Close menu and restore focus to owning trigger
Printable key Typeahead across enabled top-level item labels