Components
Navigation Menu
A navigation menu with a shared viewport for content panels.
NavigationMenu is built on the Base UI NavigationMenu primitive. It renders a horizontal list of triggers, each opening a shared content panel below.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/navigation-menu.jsonUsage
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";
export default function Example() {
return (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
);
}Examples
Default
Link trigger
Use navigationMenuTriggerStyle to style a plain link as a trigger:
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
NavigationMenudata-slot="navigation-menu" | NavigationMenu.RootBase UI |
|
NavigationMenuListdata-slot="navigation-menu-list" | NavigationMenu.ListBase UI | — |
NavigationMenuItemdata-slot="navigation-menu-item" | NavigationMenu.ItemBase UI | — |
NavigationMenuTriggerdata-slot="navigation-menu-trigger" | NavigationMenu.TriggerBase UI | — |
NavigationMenuContentdata-slot="navigation-menu-content" | NavigationMenu.ContentBase UI | — |
NavigationMenuPositioner | NavigationMenu.PositionerBase UI | — |
NavigationMenuLinkdata-slot="navigation-menu-link" | NavigationMenu.LinkBase UI | — |
Changelog
- v0.3.0NavigationMenu drops the broken NavigationMenuIndicator export, highlights active links through data-active, and times its popup with the kit motion tokens.minor
- v0.3.0Button, Toggle, Tabs and NavigationMenu ship their style configs from @workspace/ui/lib/*-variants so component files export only components.minor
- v0.1.0Restore open and close animations on every menu-family popup.patch
Last updated on