Navigation Menu

PreviewCopy Anchor Link

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add https://migoy.stanleyaf.com/r/navigation-menu.json

Installs the Radix Navigation Menu primitive, Lucide, and Migoy Button.

UsageCopy Anchor Link

import {
  NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuLink,
  navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu';

<NavigationMenu aria-label="Workspace navigation">
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuLink href="/projects" className={navigationMenuTriggerStyle()}>
        Projects
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

CompositionCopy Anchor Link

NavigationMenu
├── NavigationMenuList
│   ├── NavigationMenuItem
│   │   └── NavigationMenuLink
│   ├── NavigationMenuItem
│   │   ├── NavigationMenuTrigger
│   │   └── NavigationMenuContent
│   │       └── NavigationMenuLink (one or more)
│   └── NavigationMenuIndicator (optional)
└── NavigationMenuViewport (rendered automatically by default)

Use a link for a direct destination. Pair a trigger with content in the same item to reveal a group of links. Put the optional indicator inside the list. Set viewport={false} to position panels below the navigation without the shared viewport.

AccessibilityCopy Anchor Link

Give each navigation landmark a distinct label when the page has multiple navigation regions. Use active on the link for the current page. The link keeps the selected colors on hover. Unselected links use accent on hover, and open triggers use accent while their panel is visible. Tab into the navigation, use Left and Right to move across the top-level items, and use Down from a trigger to enter its panel. Escape closes the panel and returns focus to its trigger.

APICopy Anchor Link

Based on shadcn Navigation Menu.