shadcn.io is an independent project built on shadcn/ui
The bar shows Products and Company. Products lists Product 1 through Product 4. Company lists About, Team, Careers, and Contact. Each list opens under its own trigger.
Keep each panel under its own trigger when the lists are short. A Dropdown Menu fits one menu that is not part of a site bar. In Solid, Ark UI moves between the triggers with Tab.
Installation
Anatomy
Usage
<div class="w-full max-w-md rounded-md border bg-background p-px">
<NavigationMenu>
<NavigationMenuList>
{sections.map(section => <NavigationMenuItem>
<NavigationMenuTrigger>{section.trigger}</NavigationMenuTrigger>
<NavigationMenuContent>
<div class="flex w-48 flex-col">
{section.items.map(item => <NavigationMenuLink asChild={props => <a {...props()} href={item.href}>{item.label}</a>} />)}
</div>
</NavigationMenuContent>
</NavigationMenuItem>)}
</NavigationMenuList>
</NavigationMenu>
</div>FAQ
How does each panel open under its own trigger?
Every NavigationMenuItem opens its own panel under its trigger, so there is no viewport to turn off and no prop to pass.
What are the links?
Products lists Product 1 to Product 4, and Company lists About, Team, Careers and Contact, from two sections at the top of the file.
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 asChild, a function that renders your router's A with the props it gets.
API Reference
Navigation Menu
Sets asChild and props. The rest is on the Navigation Menu page.
