Navigation menu
A React component in Beamline's Navigation category.
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).
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
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 · Connect your agent
More in Navigation
- 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: 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: 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: 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: 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: 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: Nested folders and records with the full tree keyboard model (arrows, Home/End, *, type to jump), depth guides, counts and animated opening.
- 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.