Components
Navigation Menu
Top-level site navigation with expandable panels.
Default
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Products</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/mrkdwn">mrkdwn</NavigationMenuLink>
<NavigationMenuLink href="/mono">buena mono</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="/about" className={navigationMenuTriggerStyle()}>
About
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu> Link Component: by default
NavigationMenuLink renders a plain
<a>. To route through a framework link
(Astro, Next, React Router) pass it via the Base UI
render prop —
<NavigationMenuLink render={<Link to="/mrkdwn" />}>mrkdwn</NavigationMenuLink>
— which merges the menu's styling and keyboard behavior onto your component
instead of nesting a second anchor.
Markdown for agents: /design/navigation-menu.md · spec: /design.md