Navigation Menu
A collection of navigation links with dropdown submenus.
Import
import {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuContent,
NavigationMenuLink,
} from "@retents/ui/navigation-menu"Usage Guidelines
When to use
- For primary site-level navigation with dropdown submenus (e.g., a top nav bar with grouped links).
- When navigation items have rich dropdown content like descriptions, icons, or grouped links.
When NOT to use
- For desktop-app-style menu bars (File, Edit, View) — use Menubar instead.
- For action menus triggered by a button — use DropdownMenu instead.
- For mobile navigation — use Sheet with a hamburger menu trigger.
Preview
Usage
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>