React navigation components
Free React navigation components for Tailwind: sidebars, top bars, tabs, breadcrumbs, command palettes, pagination, mega menus and mobile drawers.
28 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Navigation should disappear into the work. These components keep the current location obvious, stay usable from the keyboard, and collapse gracefully on small screens without a second implementation.
Pick a collapsible sidebar for apps, a marketing nav for sites, and add the command palette so power users can jump anywhere with a shortcut.
Components 23
Back LinkuiSmall back navigation link with a left arrow icon, muted text that darkens on hover and a visible focus ring. Defaults to the label Back and accepts any href.npx shadcn@latest add ui.minidev.pro/r/back-link.jsonBreadcrumb EllipsisuiEllipsis marker for collapsing the middle of long breadcrumb trails. Decorative and hidden from assistive tech, sized to sit between breadcrumb separators.npx shadcn@latest add ui.minidev.pro/r/breadcrumb-ellipsis.jsonBreadcrumbuiBreadcrumb navigation from an items array, with chevron separators, linked ancestors and the current page marked with aria-current. Built with React.npx shadcn@latest add ui.minidev.pro/r/breadcrumb.jsonCollapsible SidebaruiSidebar with a toggle button on its edge that collapses it to a narrow rail and expands it again. The button label updates for screen readers.npx shadcn@latest add ui.minidev.pro/r/collapsible-sidebar.jsonCommand ItemuiRow for command menus with a label, an optional keyboard shortcut in a kbd tag and an active highlight state. Use it to build custom command lists.npx shadcn@latest add ui.minidev.pro/r/command-item.jsonCommand PaletteuiCmd K style command palette in a dialog with a search field that filters commands as you type, runs the chosen action and closes. Shows an empty state.npx shadcn@latest add ui.minidev.pro/r/command-palette.jsonFooter NavuiA slim one line footer with the brand name on the left and a wrapping set of links in a labeled nav element. Fits app shells, docs and small landing pages.npx shadcn@latest add ui.minidev.pro/r/footer-nav.jsonLinkuiA styled anchor with the accent color, underline on hover and a visible focus ring. Accepts every native anchor prop, so it works with Next.js or plain hrefs.npx shadcn@latest add ui.minidev.pro/r/link.jsonMenubaruiA desktop style app menubar built on Base UI: a row of triggers that each open a dropdown of items, with keyboard navigation between menus. shadcn compatible.npx shadcn@latest add ui.minidev.pro/r/menubar.jsonMobile Nav DraweruiA hamburger button that opens a right side navigation drawer as a modal dialog, with a close button and links that dismiss it on tap. Built in React.npx shadcn@latest add ui.minidev.pro/r/mobile-nav-drawer.jsonNavigation MenuuiA site navigation menu built on Base UI with triggers that open rich dropdown panels in a shared viewport, plus link items. Mirrors the shadcn navigation menu.npx shadcn@latest add ui.minidev.pro/r/navigation-menu.jsonNested NavuiA collapsible tree navigation built from nested node data, indented by depth with rotating chevrons on items that have children. Fits React docs sidebars.npx shadcn@latest add ui.minidev.pro/r/nested-nav.jsonOrg SwitcheruiA popover switcher for moving between organizations or workspaces, showing the current name, a check on the active item and an optional plan label per org.npx shadcn@latest add ui.minidev.pro/r/org-switcher.jsonPaginationuiA pagination nav with Prev and Next buttons that disable at the edges and numbered page buttons that mark the current page with aria-current. Built in React.npx shadcn@latest add ui.minidev.pro/r/pagination.jsonSidebar SectionuiSidebar section that groups nav items under an optional small uppercase heading with tight spacing. Stack several inside the Sidebar to organize app navigation.npx shadcn@latest add ui.minidev.pro/r/sidebar-section.jsonSidebaruiApp sidebar shell with a collapsed icon-only width and SidebarNavItem buttons that show icons, truncated labels and an active state. Built with Tailwind.npx shadcn@latest add ui.minidev.pro/r/sidebar.jsonSkip LinkuiSkip to content link that stays visually hidden until focused, then appears fixed in the top corner so keyboard users can jump past navigation in any React app.npx shadcn@latest add ui.minidev.pro/r/skip-link.jsonTabsuiTabs on Base UI with a raised thumb or a line underline that springs to the active tab, optional count badges, vertical orientation and roving keyboard focus.npx shadcn@latest add ui.minidev.pro/r/tabs.jsonTocuiTable of contents nav with anchor links indented by heading level and a highlighted active item. Pair it with scroll tracking for docs and long articles.npx shadcn@latest add ui.minidev.pro/r/toc.jsonTopbaruiApp top bar that is 56px tall with a title or custom left content and a right slot for actions, avatars or search. Sits above the main content in dashboards.npx shadcn@latest add ui.minidev.pro/r/topbar.jsonTree ViewuiNested tree view with expandable nodes, rotating chevrons, depth indentation and ARIA tree roles. Suited to file explorers and nested category lists in React.npx shadcn@latest add ui.minidev.pro/r/tree-view.jsonVertical TabsuiVertical tabs with a 180px tab list on the left and the active panel on the right, using tab and tabpanel roles. Stacks on mobile. Built for settings screens.npx shadcn@latest add ui.minidev.pro/r/vertical-tabs.jsonBack To TopuiA back to top button that appears after scrolling, with a ring that fills as the reader progresses. Smooth scroll that respects reduced motion.npx shadcn@latest add ui.minidev.pro/r/back-to-top.json
Blocks and full pages 2
Floating NavblockA sticky marketing navbar that tucks into a floating pill after you scroll, with a hover highlight that glides between links and an animated mobile menu.npx shadcn@latest add ui.minidev.pro/r/floating-nav.jsonSearch Results PageblockA search results panel with a query input, result count and a list of hits, each showing a monospace item name, a tier badge and a one line summary.npx shadcn@latest add ui.minidev.pro/r/search-results-page.json
Motion 3
Scroll Progress RailmotionA React reading progress bar that fills with page scroll on a spring, with section labels such as intro, product, proof and pricing shown beneath it.npx shadcn@latest add ui.minidev.pro/r/scroll-progress-rail.jsonDockmotionA macOS style dock for React: icons magnify under the pointer with spring physics and show a label. Real buttons or links, keyboard reachable and labelled.npx shadcn@latest add ui.minidev.pro/r/dock.jsonAnimated TabsmotionTabs with a sliding pill indicator and panels that fade in the direction of travel. Full WAI-ARIA tabs keyboard support with Arrow keys, Home and End.npx shadcn@latest add ui.minidev.pro/r/animated-tabs.json
Frequently asked questions
Does the sidebar collapse?
Yes. The collapsible sidebar folds down to an icon rail with a labeled toggle, and the mobile nav drawer covers small screens.
How do I add a Cmd+K command palette?
Install the command palette component and open it from a keyboard listener. It filters as you type and supports grouped results and shortcuts.
Do the links work with the Next.js router?
Yes. Items accept an href or a render prop, so you can pass next/link and keep client side navigation.