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 Svelte, 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>{#each sections as section (section.trigger)}<NavigationMenuItem><NavigationMenuTrigger>{section.trigger}</NavigationMenuTrigger><NavigationMenuContent><div class="flex w-48 flex-col">{#each section.items as item (item.label)}<NavigationMenuLink>{#snippet asChild(props)}<a {...props({ href: item.href })}>{item.label}</a>{/snippet}</NavigationMenuLink>{/each}</div></NavigationMenuContent></NavigationMenuItem>{/each}<NavigationMenuItem><NavigationMenuLink class={navigationMenuTriggerStyle()}>{#snippet asChild(props)}<a {...props({ href: "#" })}>Pricing</a>{/snippet}</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.
The demo puts an anchor inside NavigationMenuLink. SvelteKit routes plain links, so that is enough.
API Reference
Navigation Menu
No extra props in this demo. The rest is on the Navigation Menu page.
