# Shadcn Navigation Menu

> Open-source shadcn navigation menu components for site navigation, mega menus, and product navigation.

- Type: shadcn/ui component, free
- Page: https://web.dev.reui.io/components/navigation-menu
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/navigation-menu.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/navigation-menu.md
- MCP: `get_component("navigation-menu")`, then `get_examples("navigation-menu")`
- Examples: 4

## When to use

- Site headers whose top level items open panels of links, such as docs, components or industry pages
- Mega menu panels that lay out links with summaries in columns, with glyphs and a call to action button
- Header rows that mix panel triggers with plain top level links styled to match them

## When not to use

- Actions on the current page, such as edit, share or sign out, opened from one button: use [Dropdown Menu](https://web.dev.reui.io/components/dropdown-menu.md) (`get_component("dropdown-menu")`)
- Sections of a signed in app listed down the screen edge and kept in view: use [Sidebar](https://web.dev.reui.io/components/sidebar.md) (`get_component("sidebar")`)
- A complete header with logo, link panels and a Get Started button already placed: use the [Navbar blocks](https://web.dev.reui.io/blocks/application/navbar.md)

## Agent notes

- `NavigationMenuLink` takes its anchor through `render` on the base twin and `asChild` on the radix twin; neither twin reads the other one's prop
- Every `href` is a hash placeholder; point each `NavigationMenuLink` at a real route, through your router link where you have one
- The radix `NavigationMenu` opens panels in a shared `NavigationMenuViewport` unless `viewport` is false; base has no `viewport` prop and uses `align`

## Examples

- [Basic](https://web.dev.reui.io/components/navigation-menu/c-navigation-menu-1.md): Basic navigation menu.. Best for a Getting started panel of 2 described links next to a plain Documentation link styled as a trigger.
- [Grid Layout](https://web.dev.reui.io/components/navigation-menu/c-navigation-menu-2.md): Navigation menu with grid layout.. Best for a Components trigger whose 4 titled summaries sit in 1 column and split into 2 columns from md up.
- [With Icons](https://web.dev.reui.io/components/navigation-menu/c-navigation-menu-3.md): Navigation menu with icons.. Best for a narrow Status panel of 2 one line links, Backlog and Done, each led by a status glyph.
- [Learn More Button](https://web.dev.reui.io/components/navigation-menu/c-navigation-menu-4.md): Navigation menu with grid layout and learn more button.. Best for an Industries panel of 8 segments in a fixed 2 column grid, each with a glyph and summary, above a full width Learn more button.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.