shadcn.io is an independent project built on shadcn/ui
The bar shows Products, Solutions, and Pricing. Products lists Product 1, Product 2, and Product 3. Solutions lists Solution 1, Solution 2, and Solution 3. Pricing is a link.
Use this for a small marketing header. An app's command row belongs in a Menubar instead. In React, Base UI moves between the triggers with Tab.
Installation
Anatomy
Usage
<div className="w-full max-w-md rounded-md border bg-background p-px">
<NavigationMenu>
<NavigationMenuList>
{sections.map((section) => (
<NavigationMenuItem key={section.trigger}>
<NavigationMenuTrigger>{section.trigger}</NavigationMenuTrigger>
<NavigationMenuContent>
<div className="flex w-48 flex-col">
{section.items.map((item) => (
<NavigationMenuLink
key={item.label}
render={<Link href={item.href} />}
>
{item.label}
</NavigationMenuLink>
))}
</div>
</NavigationMenuContent>
</NavigationMenuItem>
))}
<NavigationMenuItem>
<NavigationMenuLink
className={navigationMenuTriggerStyle()}
render={<Link href="#" />}
>
Pricing
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
</div>FAQ
Which parts make up the menu?
NavigationMenu and NavigationMenuList hold one NavigationMenuItem per entry. A dropdown is a NavigationMenuTrigger with a NavigationMenuContent of NavigationMenuLinks; Pricing is a NavigationMenuLink on its own.
Why does Pricing look like the triggers?
It takes navigationMenuTriggerStyle() as its class, so a plain link lines up with the dropdown triggers beside it.
Where do the links come from?
Two sections at the top of the file, each a trigger label and its links, mapped to one item each. Edit that list to change the menu.
How do the links use my router?
Each link is your router's link rendered through NavigationMenuLink, so it keeps the menu's styles and focus handling.
NavigationMenuLink takes the Next.js Link through render, as in render={<Link href="#" />}.
API Reference
Navigation Menu
No extra props in this demo. The rest is on the Navigation Menu page.
