Site navigation whose dropdowns become a drawer on small screens.
import { NavigationMenu } from "@/fragments/ui";Source<NavigationMenu>
<NavigationMenu.List>
<NavigationMenu.Item value="products">
<NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
<NavigationMenu.Content>
<NavigationMenu.Link href="/analytics" title="Analytics" description="Track your metrics and KPIs." />npx @usefragments/cli add navigationmenuWrites src/fragments/ui/components/NavigationMenu plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
NavigationMenu is a compound: import the root and reach its parts through dot notation.
NavigationMenu.ListNavigationMenu.ItemNavigationMenu.TriggerNavigationMenu.ContentNavigationMenu.LinkNavigationMenu.IndicatorNavigationMenu.ViewportNavigationMenu.MobileBrandNavigationMenu.MobileContentNavigationMenu.MobileSectionTwo dropdowns beside one plain link.
<NavigationMenu>
<NavigationMenu.List>
<NavigationMenu.Item value="products">
<NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
<NavigationMenu.Content>
<NavigationMenu.Link href="/analytics" title="Analytics" description="Track your metrics and KPIs." />
<NavigationMenu.Link href="/automation" title="Automation" description="Automate your workflows." />
</NavigationMenu.Content>
</NavigationMenu.Item>
<NavigationMenu.Item value="resources">
<NavigationMenu.Trigger>Resources</NavigationMenu.Trigger>
<NavigationMenu.Content>
<NavigationMenu.Link href="/docs" title="Documentation" description="Comprehensive API reference." />
<NavigationMenu.Link href="/blog" title="Blog" description="Latest news and updates." />
</NavigationMenu.Content>
</NavigationMenu.Item>
<NavigationMenu.Item>
<NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>A grid of icons, titles, and descriptions.
<NavigationMenu>
<NavigationMenu.List>
<NavigationMenu.Item value="platform">
<NavigationMenu.Trigger>Platform</NavigationMenu.Trigger>
<NavigationMenu.Content>
<divLink lists where descriptions would be noise.
<NavigationMenu>
<NavigationMenu.List>
<NavigationMenu.Item value="company">
<NavigationMenu.Trigger>Company</NavigationMenu.Trigger>
<NavigationMenu.Content>
<div style={{ display: 'flex', flexDirection: 'column', padding: '4px', minWidth: '160px' }}>One promoted item leads the panel.
<NavigationMenu>
<NavigationMenu.List>
<NavigationMenu.Item value="learn">
<NavigationMenu.Trigger>Learn</NavigationMenu.Trigger>
<NavigationMenu.Content>
<divPanels open to the side instead of below.
<div style={{ display: 'flex' }}>
<NavigationMenu orientation="vertical">
<NavigationMenu.List>
<NavigationMenu.Item value="overview">
<NavigationMenu.Trigger>Overview</NavigationMenu.Trigger>
<NavigationMenu.Content>Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | NavigationMenu.List, NavigationMenu.Viewport, and optionally NavigationMenu.MobileContent |
value | string | Not set | Controlled open item value |
defaultValue | string | '' | Default open item value |
onValueChange | function | Not set | Callback when open item changes |
orientation | enumhorizontalvertical | horizontal | 'horizontal' | 'vertical' |
delayDuration | number | 200 | Hover delay before opening (ms) |
skipDelayDuration | number | 300 | Duration after close during which moving to another trigger opens instantly (ms) |
icons | object | Not set | Optional icon overrides for triggerChevron, mobileMenu, mobileClose, and drawerClose controls |
mobileBreakpoint | enummdlg | md | Viewport breakpoint below which the mobile drawer replaces desktop navigation |