Menubar
@xui/menubarA desktop-style application menu bar. Built on the Angular CDK's CdkMenuBar: roving focus, arrow keys move between menus, and once one is open, hovering a sibling switches to it. Dropdowns are @xui/menu.
Install
pnpm add @xui/menubar Add the barrel to a standalone component's imports:
import { XuiMenubarImports } from '@xui/menubar';@Component({ imports: [XuiMenubarImports], // …})Examples
Basic
<div xuiMenubar> <button xuiMenubarTrigger [xuiMenubarTriggerFor]="file">File</button> <button xuiMenubarTrigger [xuiMenubarTriggerFor]="edit">Edit</button> <button xuiMenubarTrigger [xuiMenubarTriggerFor]="view">View</button></div><ng-template #file> <xui-menu> <button xuiMenuItem>New Tab<span menuItemLabel>⌘T</span></button> <button xuiMenuItem>New Window<span menuItemLabel>⌘N</span></button> <xui-menu-divider /> <button xuiMenuItem>Print…<span menuItemLabel>⌘P</span></button> </xui-menu></ng-template><ng-template #edit> <xui-menu> <button xuiMenuItem>Undo<span menuItemLabel>⌘Z</span></button> <button xuiMenuItem>Redo<span menuItemLabel>⇧⌘Z</span></button> <xui-menu-divider /> <button xuiMenuItem [xuiMenuTriggerFor]="find">Find…</button> </xui-menu></ng-template><ng-template #find> <xui-menu> <button xuiMenuItem>Search the Web</button> <button xuiMenuItem>Find…<span menuItemLabel>⌘F</span></button> <button xuiMenuItem>Find Next<span menuItemLabel>⌘G</span></button> </xui-menu></ng-template><ng-template #view> <xui-menu> <xui-menu-divider title="Appearance" /> <button xuiMenuItem selected>Show Toolbar</button> <button xuiMenuItem>Show Sidebar</button> <xui-menu-divider /> <button xuiMenuItem>Reload<span menuItemLabel>⌘R</span></button> </xui-menu></ng-template>API
A horizontal application menu bar (File / Edit / View …). Built on @angular/cdk/menu's CdkMenuBar, so it gets roving tab focus, arrow-key movement between menus, open-adjacent-on-arrow, and hover-to-switch once a menu is open. Fill the dropdowns with @xui/menu (<xui-menu> / [xuiMenuItem]).
Inputs
classClassValueExtra classes, merged into the directive's own rather than replacing them.''A top-level menu bar item that opens a menu. It is both a CdkMenuItem (so it takes part in the bar's roving focus) and a CdkMenuTrigger (so it opens its menu). Point xuiMenubarTriggerFor at an <ng-template> holding an <xui-menu>.
Inputs
classClassValueExtra classes, merged into the directive's own rather than replacing them.''