# Navigation menu

A React component in [Beamline](https://beamline.io/)'s [Navigation](https://beamline.io/components/navigation) category. Live demo: https://beamline.io/components/navigation-menu

A site or docs header whose sections open into one panel that resizes and slides between them; NavigationMenuCard is the standard link row.

## Use it for

- Marketing, docs or portal headers with grouped links.

## Not for

- In-app navigation ([sidebar](https://beamline.io/components/sidebar)).

## Anatomy

- NavigationMenu
- NavigationMenuList (scrolls when too narrow)
- NavigationMenuItem
- NavigationMenuTrigger
- NavigationMenuContent
- NavigationMenuLink
- NavigationMenuCard (icon on an m-tag tile, title, one line)
- viewport (built in, m-overlay)

## States

- closed
- open (trigger tinted, chevron turned)
- switching section
- active link (ink plus a short accent rule under the label; a panel card is tinted with an inline-start edge)
- narrow: the row scrolls sideways with an edge fade where more sections wait; under 640px the panel hangs from the header's end and stays inside the screen

## Keyboard

- ← → between sections
- ↓ / Enter opens
- Tab through the panel
- Escape closes
- Direction follows explicit props or the managed scope and resolves the surrounding static direction; forwarded refs keep internal direction measurement attached. refreshAppearance updates static scope changes without remounting controls.

## Motion

The panel resizes over 200 ms while sections slide 24 px from the side the pointer came from.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value / defaultValue / onValueChange` | `string` | — |  |
| `NavigationMenuCard` | `{ href, title, description?, icon?, active? }` | — |  |
| `style / ref` | `CSSProperties / native Ref` | — | native nav; compositional parts retain Radix native refs |
| `classNames` | `NavigationMenuClassNames / NavigationMenuTriggerClassNames / NavigationMenuCardClassNames` | — |  |

## Dependencies

`@radix-ui/react-direction`, `@radix-ui/react-navigation-menu`, `lucide-react`

## Import

```tsx
import { NavigationMenu, NavigationMenuList, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuCard } from "@/components/navigation-menu/navigation-menu";
```

## Get it

Navigation menu is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Navigation

- [Breadcrumb](https://beamline.io/components/breadcrumb): Where a page sits and the way back up; long paths keep the first and last two levels and fold the middle into a menu.
- [Menu bar](https://beamline.io/components/menubar): A desktop-style File / Edit / View bar for editor-like apps; each menu takes the same rows as the dropdown menu, and pointing moves between open menus.
- [Pagination](https://beamline.io/components/pagination): Moves through pages of a known length: first, last and the current page's neighbours, with an optional “41–60 of 468”; a phone shows “Page 6 of 24”.
- [Sidebar](https://beamline.io/components/sidebar): The app's main navigation: sections, items with counts and one level of sub-pages, an icon rail with tooltips (⌘B, the trigger or the edge), and a sheet…
- [Stepper](https://beamline.io/components/stepper): Where someone is in a multi-step flow: done steps carry a check, the current one a ring, and the line between marks fills as steps complete.
- [Tabs](https://beamline.io/components/tabs): Switches between panels of one object; one indicator slides to the active tab, counts sit beside labels, and a long row scrolls instead of wrapping.
- [Tree view](https://beamline.io/components/tree-view): Nested folders and records with the full tree keyboard model (arrows, Home/End, *, type to jump), depth guides, counts and animated opening.
- [User menu](https://beamline.io/components/user-menu): The account menu behind the avatar: who is signed in, status, theme, account pages and sign out with progress; a bottom sheet on phones.