chrome:shell.skip

generated:catalog.entry.navigation-menu.title

generated:catalog.entry.navigation-menu.description

@xngui/components/navigation-menu
@xngui/components/navigation-menu

chrome:demo.section

chrome:demo.preview

demo-preview:navigation-menu.onboarding demo-preview:navigation-menu.introduction demo-preview:navigation-menu.tools demo-preview:badge.new demo-preview:navigation-menu.roadmap
demo-preview:hints.category.navigation:
Tab↑ ↓
demo-preview:hints.category.focus:
Focus
demo-preview:hints.category.shortcuts:
Enter / Space
import { Component } from '@angular/core';
import { XNavigationMenu, XNavigationMenuItem, XNavigationMenuList } from '@xngui/components/navigation-menu';
 
@Component({
selector: 'app-example',
imports: [XNavigationMenu, XNavigationMenuItem, XNavigationMenuList],
templateUrl: './navigation-menu.component.html',
})
export class ExampleComponent {}

chrome:demo.events.title

chrome:demo.events.empty

chrome:demo.api.title

x-navigation-menu

chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
ariaLabel
string
—
Accessible name for the navigation region — falls back to the `navigationMenu.ariaLabel` i18n key.
activeHref
string
—
`href` or route path that receives `aria-current="page"` on the matching link.
size
XSize
—
Visual size tier for row controls — falls back to XConfigService when unset.
density
XDensity
—
Spacing offsets for rows — ` when unset; orthogonal to `size`.