Navigation menushadcn
A site's main navigation, with panels.
Navigation- Install
- npx shadcn add navigation-menu
- Import from
- @/components/ui/navigation-menu
- Guidance
- draft · v0.1.0
Examples
As installed from shadcn – rendering in jsp-ds tokens through the bridge.
Guidance
When to use
- The main navigation of a marketing site: a few top-level links, some with a panel of sub-links.
When not to use
- Inside a signed-in product – use the app shell's side nav.
Rules
- Up to about six top-level items.
- Panel links have a title and one line saying what's there.
- On narrow screens, swap it for a Sheet with the same links.
Install
Terminal
npx shadcn add navigation-menuImport
import { NavigationMenu } from "@/components/ui/navigation-menu"From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.