Menubar
A horizontal menu bar for the top of an app or a page. Root items open their submenus below, deeper levels open to the side; below the breakpoint the bar turns into a button with an inline menu.
Basic
model takes the kit menu items: label, icon, command, nested items and separators. Click a root item to open its submenu; while it is open, pointing at another root item switches to it.
Last command: none
Start and end
txMenubarStart and txMenubarEnd put your own content before the items and at the far end — a logo, a search field, an avatar.
Router links
Items with routerLink navigate with the Angular router, url + target make a plain link. These open other pages of this site.
Auto display
autoDisplay opens a root submenu as soon as the pointer is over its item, without the first click.
Disabled and badges
disabled items cannot be picked and the arrow keys skip them; badge shows a counter after the label.
Mobile
Narrower than breakpoint (960px by default) the items move into a menu under a button; nested items open in place. Here the breakpoint is wide so the mobile menu shows on any screen.
Template
ng-template txMenubarItem draws every item — root items and submenu items alike; it gets the item and hasSubmenu.
Design tokens
dt changes one bar — here a borderless bar on the ground colour with rounder items.