Navigation Menu
Top-level site navigation with flyout panels, for marketing sites and docs.
Usage
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
} from "@zynactra/ui/navigation-menu"<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Services</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/services/platform">Platform</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="/work" className={navigationMenuTriggerStyle()}>
Work
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>For your router's link, pass it through render: <NavigationMenuLink render={<Link href="/work" />}>.
Guidelines
- Five top-level items or fewer. Each panel has a title and one line per link.
- Mark the current section with
data-active(oractiveon the link); that's the "active place" in the brand budget. - In apps, use the Sidebar instead. On small screens, collapse it into a Sheet.
API reference
Behaviour and props come from Base UI. See the Base UI Navigation Menu docs.