Navigation menu
@xui/navigation-menuA horizontal nav where items open a rich dropdown "mega menu". Panels open on hover or focus and share one viewport under the bar; items with an href and no template are plain links.
Install
pnpm add @xui/navigation-menu Add the barrel to a standalone component's imports:
import { XuiNavigationMenuImports } from '@xui/navigation-menu';
@Component({
imports: [XuiNavigationMenuImports],
// …
})Examples
Basic
Loading preview…
<div class="pb-64">
<xui-navigation-menu>
<xui-navigation-menu-item value="products" trigger="Products">
<ng-template>
<div class="grid w-[30rem] grid-cols-2 gap-2">
@for (p of ['Analytics','Engagement','Security','Automation']; track p) {
<a class="hover:bg-surface-inset block rounded-md p-3">
<div class="text-foreground text-sm font-medium">{{ p }}</div>
<div class="text-foreground-muted mt-0.5 text-xs">Everything you need for {{ p.toLowerCase() }}.</div>
</a>
}
</div>
</ng-template>
</xui-navigation-menu-item>
<xui-navigation-menu-item value="resources" trigger="Resources">
<ng-template>
<div class="flex w-56 flex-col">
@for (r of ['Documentation','Guides','API reference','Changelog']; track r) {
<a class="hover:bg-surface-inset text-foreground rounded-md px-3 py-2 text-sm">{{ r }}</a>
}
</div>
</ng-template>
</xui-navigation-menu-item>
<xui-navigation-menu-item value="pricing" trigger="Pricing" href="#pricing" />
</xui-navigation-menu>
</div>API
One entry of an {@link XuiNavigationMenu}. Give it a trigger label and a value. Project an <ng-template> to make it a dropdown panel; give it an href (and no template) to make it a plain link.
Inputs
valuestringThe item's key, used by the menu to track which panel is open. Must be unique within the menu.triggerstringThe label shown in the menu bar. Project content for the panel it opens.''hrefstringTurns the item into a plain link rather than a panel trigger. Use it for a top-level entry with nothing beneath it.''A horizontal navigation bar where items can open a rich dropdown panel — a "mega menu". Panels open on hover or focus and share one viewport beneath the bar; a padded bridge keeps the panel reachable across the gap. Items with an href and no template render as plain links.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''