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 part of an interface users judge before they judge anything else. If someone cannot locate a feature, they conclude it is missing — no matter how well it works once found. Drivn's navigation family covers the patterns every app eventually needs — menu, tabs, breadcrumb, pagination, sidebar, dropdown, context menu — behind a single dot notation API and with zero runtime dependencies to audit or keep patched.
This hub lists each navigation component with a short description and a note on when it earns its place. Because Drivn components are copy-paste and live in your own repository, you can compose them into the more specialized surfaces a real product grows into — a command palette, a nested settings sidebar, a breadcrumb that ends in a dropdown — without starting from an empty file. Each component owns its keyboard handling, ARIA roles, and click-outside dismissal, so you never pull in a floating-ui or focus-trap package just to ship an accessible menu. Screen-reader users receive correct roles by default, keyboard users get the shortcuts they expect, and every line of that behavior stays in code you can read and change.
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
On any page nested more than a level deep, put a breadcrumb above the content. It tells users how far in they are and gives them a one-click path back up, which matters most on the pages where the browser back button is ambiguous. Drivn's breadcrumb inserts separators for you and truncates long trails with an ellipsis so the bar never wraps onto a second line.
When a list outgrows a single screen, reach for pagination — it ships with dot notation, Previous and Next controls, ellipsis for large page counts, and an active-page state you bind to your query. Drop it under a data-table for structured rows, or beneath any card grid that loads in pages. Both breadcrumb and pagination are wayfinding, not decoration: they answer "where am I" and "how do I move" so users never feel stranded mid-task.
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.
1 npx drivn add navigation-menu 2 npx drivn add sidebar 3 npx drivn add tabs 4 npx drivn add breadcrumb 5 npx drivn add pagination 6 npx drivn add dropdown 7 npx drivn add context-menu
Install Drivn in one command
Copy the source into your project and own every line. Zero runtime dependencies, pure React + Tailwind.
npx drivn@latest createRequires Node 18+. Works with npm, pnpm, and yarn.