Navigation Menu

Navigation Menu builds a site or product header whose top-level sections open a panel of links on hover or press. It fits marketing sites and docs headers with grouped destinations. Each entry should link to a destination.

Install

bashnpx shadcn@4.18.0 add @siteplane/navigation-menu

Import it from @/siteplane/components/navigation-menu. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Dropdown Menu: Pick Dropdown Menu instead when the entries are actions, such as Rename or Sign out.
• vs Tabs: Pick Tabs instead when switching swaps panels on the same page.
• vs Sidebar: Pick Sidebar for an application with many sections that needs persistent vertical navigation.

Rules

• Give NavigationMenu an aria-label so its nav landmark is named.
• Render a single NavigationMenuPopup inside the menu. All panels share it as people move between triggers.
• Set active on the NavigationMenuLink for the current page so it gets aria-current page and the active style.
• To open panels from your own state, pass value and onValueChange with a matching NavigationMenuItem value, and null to close.
• Give wide panel content max-w-full so a multi-column panel fits small screens.

Reference

• Navigation Menu docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Navigation. Read the installed source under src/siteplane before relying on an API.