React navigation components for Tailwind CSS
Navigation components tell people where they are and get them where they want to go. For app layouts there are Sidebar (grouped links, nested sections, badges and an icon rail), Topbar, User Menu and Workspace Switcher. Within a page, Tabs, Nav Tabs, Breadcrumb, Steps, Table Of Contents and Pagination cover sections, hierarchy, progress and long lists. Command Menu is the ⌘K palette with groups, shortcuts, nested pages and async results, and Global Search returns grouped results from every entity as you type. Nav Menu is the horizontal navigation of a website, with dropdown panels and mega menus.
All Navigation[19]
User Menu
The signed-in person's menu: a profile header, a theme switch, account links, other accounts and sign out, as a bottom sheet on phones.
Nav MenuFree
A website's horizontal navigation: links and dropdown panels (lists or mega menus with a featured card) that morph through one shared panel.
Sidebar
The admin sidebar: grouped links with icons, nested sections, badges, a sliding active pill, an icon rail with flyouts and a filter.
Back To Top
A floating button that appears on long pages, rings with your reading progress and takes you, and your focus, back to the top.
Command Menu
The ⌘K palette: search and run anything with groups, shortcuts, nested pages, async results and recents, and a full-height sheet on phones.
Global Search
The search field of an app header: grouped results from every entity as you type, scopes, recents and suggestions, full-screen on phones.
Nav Tabs
Tabs that are links: the sections of a page or a record that change the URL, with the look of the tabs and the semantics of navigation.
Pagination
Pages for tables and lists: numbers with ellipses, previous / next, page size, jump to page, a compact phone pager and load more.
Steps
A stepper for checkouts, onboarding and KYC: circles, bars or dots, with complete, error and loading states and a compact phone header.
Table Of Contents
An "On this page" list of a long page's sections that highlights the one being read and jumps to any; a pill and sheet on phones.
TabsFree
Switch between views of the same page with a sliding indicator: underline for sections, pill for filters, segmented for a compact switch.
Topbar
The app header: menu button, title or breadcrumb, a search in the middle and actions at the end, on a sticky glass bar.
Workspace Switcher
Switch organizations, teams or projects: logos, plan badges, search, groups, mod+1…9 shortcuts and a create row; a sheet on phones.
Breadcrumb
Where you are in the hierarchy and a one-tap way up: a trail that folds its middle into “…”, sibling switchers and a back link on phones.
Scroll ProgressFree
A scroll progress pill that tracks reading position and expands into a squircle menu of sections you can jump to.
Proximity SidebarFree
A document minimap of thin dashes that swell near the pointer and pulse with the section you are reading.
Guides
Tutorials and guides from the blog that use these components.
Build it: screens and apps
Nextjs Admin Dashboard Tutorial: 5 Screens, Phone-Ready
A nextjs admin dashboard tutorial for the App Router: app shell, KPI home, server-side data tables, settings and team pages, each one usable on a phone.
19 min read
Mobile UI in React
React Bottom Navigation Bar in Next.js: Safe Areas, Badges
Build a React bottom navigation bar in Next.js: 3 to 5 link tabs, safe areas, badges screen readers announce, hide on scroll, and when a sidebar fits better.
8 min read
Component guides
React Command Palette: Cmd+K, Nested Pages and Mobile
Build a React command palette that binds Cmd+K on a Mac and Ctrl+K elsewhere, with nested pages, async results, recents and a full-height sheet on phones.
9 min read
Mobile UI in React
React Segmented Control: iOS Thumb, Drag and When to Use It
A React segmented control with the iOS raised thumb you can drag, 44px touch targets and radio semantics, plus when to use tabs, a toggle group or radio cards.
8 min read
Component guides
TanStack Table v9 Data Table: Filters, Bulk Actions, Mobile
Build an admin data table on TanStack Table v9: tableFeatures setup, column filters, bulk actions, start and end pinning, server pagination and phone cards.
12 min read
About Navigation
A few are more expressive: Gooey Nav, Bounce Sidebar, Hook Sidebar, Proximity Sidebar and Scroll Progress animate the active state, and Back To Top fills a ring with your reading progress. On a phone the command menu becomes a full-height sheet, the user menu and workspace switcher open as bottom sheets, the nav menu turns into a full-screen menu, pagination switches to a compact pager, and touch targets are 44px. 7 of the 19 navigation components are free: the source is open to everyone through the CLI, shadcn and the docs page (the MCP server needs a free account key). The other 12 are part of Pro.