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.''