Skip to content
Drivn logoDrivn
2 min read

React Navigation Components — Menus, Tabs, Breadcrumb

Navigation UI for React — navigation menu, tabs, breadcrumb, pagination, sidebar, dropdown, context menu. Zero runtime deps, dot notation API.

Navigation is the scaffolding of your app. A user who cannot find a feature will decide it does not exist — regardless of how well that feature works. Drivn's navigation family covers the standard patterns (menu, tabs, breadcrumb, pagination, sidebar, dropdown, context menu) with a consistent dot notation API and zero runtime dependencies.

This hub lists every navigation component with a short description and guidance on when to use it. Because Drivn components are copy-paste and live in your repo, you can compose them into more specialized patterns — a command palette, a settings sidebar, a breadcrumb-with-dropdown — without building from scratch. Each component handles its own keyboard navigation, ARIA attributes, and click-outside dismissal, so you do not need an external floating-ui or focus-trap dependency to build an accessible menu surface. Screen-reader users get proper roles out of the box, and power users get the keyboard shortcuts they expect.

Primary navigation

For the top-level site navigation, use navigation-menu — it renders horizontal menu items with optional dropdown content panels and a click-outside close. For deeper products with many sections, use sidebar with groups, icon items, and collapsible sections.

The navigation menu is appropriate for marketing sites, docs, and simple apps. The sidebar scales to complex products where the user needs persistent access to many sections — settings, admin panels, IDE-style interfaces.

Secondary and contextual

Use tabs to switch between related views inside a page — profile tabs, report views, settings sections. Drivn's tabs component has multiple style variants (pill, underline, compact) and keyboard navigation built in.

Use dropdown for per-item actions (edit, duplicate, delete), and context-menu for right-click actions in data grids, file lists, and canvas UIs. Both support submenus, icons, keyboard shortcuts, and the same dot notation.

Wayfinding

For hierarchical pages, add breadcrumb at the top of the content — it gives users a sense of depth and a way back up. Drivn's breadcrumb auto-inserts separators and supports ellipsis truncation for long paths.

For paginated lists, use pagination with dot notation, Previous/Next links, ellipsis, and an active page state. Pair it with data-table for structured data, or render it standalone below any card grid.

Install

All navigation components install via the Drivn CLI. Each is a single file (with sub-components) copied into your src/components/ui/ folder. Install only the ones your app uses — there is no "navigation" bundle to tree-shake around. The CLI infers your package manager from your lockfile and runs the equivalent command, so you can paste the same npx drivn add line into any React project without adjusting the syntax. After install, see the theming guide for matching the menu colors to your brand.

1npx drivn add navigation-menu
2npx drivn add sidebar
3npx drivn add tabs
4npx drivn add breadcrumb
5npx drivn add pagination
6npx drivn add dropdown
7npx drivn add context-menu
Get started

Install Drivn in one command

Copy the source into your project and own every line. Zero runtime dependencies, pure React + Tailwind.

npx drivn@latest create

Requires Node 18+. Works with npm, pnpm, and yarn.

Enjoying Drivn?
Star the repo on GitHub to follow new component releases.
Star →