Menu bar
A React component in Beamline's Navigation category.
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.
Use it for
- Editor-like apps with many commands: report builders, design tools, spreadsheets.
Not for
- Typical SaaS navigation (sidebar or tabs).
- One object's actions (dropdown-menu).
Anatomy
- bar
- trigger per menu
- surface
- rows (shared MenuItem)
States
- closed
- one menu open
- item highlighted
- check/radio on
- disabled
Keyboard
- ← → move between menus
- ↓ / Enter opens
- ↑ ↓ move in a menu
- Escape closes and returns focus to the trigger
- 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
Same surface and gliding highlight as the dropdown menu; menus switch instantly once one is open. Opens out of its trigger (_shared/overlay.module.css, source morph): the layer starts as the trigger's own box, offset onto it, and grows; the side next to the trigger is there at once so the nearest rows read within the ruled 90 ms, the far side settles by ~200 ms, content fades in over 90 ms; it closes back into the trigger in 180 ms. Until it has grown the press that opened it cannot land on a row. Reduced motion: it appears.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | |
menus | { label: string; items: MenuItem[] }[] | — | |
value / defaultValue / onValueChange | string | — | |
classNames | MenuClassNames | — | |
style / ref | CSSProperties / native Ref | — | Root styles; ref targets native menubar div. |
Dependencies
@radix-ui/react-direction, @radix-ui/react-menubar, lucide-react
Import
import { Menubar } from "@/components/menubar/menubar";Get it
Menu bar 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.
- 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.
- 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.