# Navigation

Moving between places and steps. 9 live React parts in [Beamline](https://beamline.io/), each in nine looks.

- [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.
- [Navigation menu](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.
- [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 on phones.
- [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.

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.

Other categories: [Actions](https://beamline.io/components/actions) · [Form controls](https://beamline.io/components/forms) · [Overlays](https://beamline.io/components/overlays) · [Layout](https://beamline.io/components/layout) · [Feedback](https://beamline.io/components/feedback) · [Content & display](https://beamline.io/components/display) · [Data & tables](https://beamline.io/components/data) · [Charts & data-vis](https://beamline.io/components/charts) · [Trading](https://beamline.io/components/trading) · [Dashboard](https://beamline.io/components/dashboard) · [AI & agents](https://beamline.io/components/ai) · [Voice & audio](https://beamline.io/components/voice) · [Motion & effects](https://beamline.io/components/effects) · [Blocks](https://beamline.io/components/blocks)