Navigation Menu
A collection of links for navigating websites.
tsx
import Link from "next/link"import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle,} from "@/components/ui/navigation-menu"
export function NavigationMenuDemo() { return ( <NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger>Getting started</NavigationMenuTrigger> <NavigationMenuContent> <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]"> <li className="row-span-3"> <NavigationMenuLink asChild> <Link className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md" href="/" > <div className="mb-2 mt-4 text-lg font-medium"> FivUI </div> <p className="text-sm leading-tight text-muted-foreground"> Beautifully designed components built with Radix UI and Tailwind CSS. </p> </Link> </NavigationMenuLink> </li> <ListItem href="/docs" title="Introduction"> Re-usable components built using Radix UI and Tailwind CSS. </ListItem> <ListItem href="/docs/installation" title="Installation"> How to install dependencies and structure your app. </ListItem> <ListItem href="/docs/theming" title="Theming"> Using Tailwind CSS to style your components. </ListItem> </ul> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger>Components</NavigationMenuTrigger> <NavigationMenuContent> <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] "> {components.map((component) => ( <ListItem key={component.title} title={component.title} href={component.href} > {component.description} </ListItem> ))} </ul> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}> <Link href="/docs"> Documentation </Link> </NavigationMenuLink> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu> )}
Installation
CLI
bash
npx fivui add navigation-menu
Manual
Install the following dependencies:
bash
npm install @radix-ui/react-navigation-menu class-variance-authority
Usage
tsx
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger,} from "@/components/ui/navigation-menu"
tsx
<NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger>Item One</NavigationMenuTrigger> <NavigationMenuContent> <NavigationMenuLink>Link</NavigationMenuLink> </NavigationMenuContent> </NavigationMenuItem> </NavigationMenuList></NavigationMenu>
Examples
Simple
A simple navigation menu with basic links.
Simple Navigation
Basic navigation menu with simple links
tsx
import Link from "next/link"import { NavigationMenu, NavigationMenuLink, NavigationMenuItem, NavigationMenuList, navigationMenuTriggerStyle,} from "@/components/ui/navigation-menu"
export function NavigationMenuSimple() { return ( <NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}> <Link href="/">Home</Link> </NavigationMenuLink> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}> <Link href="/about">About</Link> </NavigationMenuLink> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}> <Link href="/contact">Contact</Link> </NavigationMenuLink> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu> )}
With Icons
Navigation menu with icons in dropdown content.
Navigation with Icons
Menu items with status icons
tsx
import Link from "next/link"import { CircleCheckIcon, CircleHelpIcon, CircleIcon } from "lucide-react"import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger,} from "@/components/ui/navigation-menu"
export function NavigationMenuWithIcons() { return ( <NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger>Status</NavigationMenuTrigger> <NavigationMenuContent> <ul className="grid w-[200px] gap-3 p-4"> <li> <NavigationMenuLink asChild> <Link href="#" className="flex items-center gap-2 p-2 hover:bg-accent rounded"> <CircleHelpIcon className="h-4 w-4" /> Backlog </Link> </NavigationMenuLink> </li> <li> <NavigationMenuLink asChild> <Link href="#" className="flex items-center gap-2 p-2 hover:bg-accent rounded"> <CircleIcon className="h-4 w-4" /> To Do </Link> </NavigationMenuLink> </li> <li> <NavigationMenuLink asChild> <Link href="#" className="flex items-center gap-2 p-2 hover:bg-accent rounded"> <CircleCheckIcon className="h-4 w-4" /> Done </Link> </NavigationMenuLink> </li> </ul> </NavigationMenuContent> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu> )}
API Reference
NavigationMenu
Contains all the parts of a navigation menu.
Prop | Type | Default | Description |
---|---|---|---|
value | string | - | The controlled value of the menu item to activate. |
onValueChange | function | - | Event handler called when the value changes. |
dir | ltr | rtl | ltr | The reading direction of the navigation menu. |
NavigationMenuTrigger
The button that toggles the content.
Prop | Type | Default | Description |
---|---|---|---|
asChild | boolean | false | Change the default rendered element for the one passed as a child. |
NavigationMenuContent
The component that pops out when a trigger is activated.
Prop | Type | Default | Description |
---|---|---|---|
asChild | boolean | false | Change the default rendered element for the one passed as a child. |
onEscapeKeyDown | function | - | Event handler called when the escape key is down. |
External Documentation
Navigation Menu is built on top of Radix UI Navigation Menu. For more advanced usage and API details, refer to the official documentation.
View Radix UI Navigation Menu Documentation