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.

PropTypeDefaultDescription
valuestring-The controlled value of the menu item to activate.
onValueChangefunction-Event handler called when the value changes.
dirltr | rtlltrThe reading direction of the navigation menu.

NavigationMenuTrigger

The button that toggles the content.

PropTypeDefaultDescription
asChildbooleanfalseChange the default rendered element for the one passed as a child.

NavigationMenuContent

The component that pops out when a trigger is activated.

PropTypeDefaultDescription
asChildbooleanfalseChange the default rendered element for the one passed as a child.
onEscapeKeyDownfunction-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