Charcoal UI

React Navigation Components

Animated React tabs, menus, docks, sidebars, menubars and breadcrumbs.

About these navigation components

Navigation is what people touch most, so these components make it feel quick and sure: tabs with a gliding indicator, docks that magnify, sidebars that collapse to a rail, mega menus, a desktop-style menubar, file trees and toolbars that move overflow into a More menu.

They keep the semantics that matter for search engines and assistive tech: real links, aria-current on the current page, and the arrow-key patterns each widget is expected to have.

Where they earn their keep

  • App shells and dashboard sidebars.
  • Marketing site headers and mega menus.
  • Docs sites with deep navigation.
  • Editors and tools with menubars and toolbars.

How they are built

Indicators and highlights move with shared layout animation, so a single element glides between items instead of each one fading. Menus close on Escape and outside clicks and return focus to their trigger.

Each one is a single file you copy into your project with the shadcn CLI and own outright. They are written for React 19 and Tailwind CSS 4 with Motion, use only your theme's CSS variables, and work in Next.js, Vite, Remix and Astro.

All 27 navigation components

6 are free and MIT licensed, and 21 are part of Charcoal UI Pro, which covers all 393 Pro components, 112 sections and 100 templates for one price. Open any of them to try it live, tune it and copy the code.

  • Tabs: Animated React tabs with a gliding indicator and panels that slide the way you travel
  • Dock (Pro): A macOS-style React dock whose icons swell with pointer distance and show labels
  • Expandable Tabs (Pro): Compact React icon tabs where the active tab expands to reveal its label
  • Breadcrumb: An animated React breadcrumb that folds long trails and unfolds them on click
  • Pagination: Animated React pagination with smart gaps and a pill that glides to the current page
  • Floating Nav (Pro): A floating React pill nav that hides on scroll down and returns on scroll up
  • Sidebar: A collapsible React app sidebar with spring width, fading labels and an active marker
  • Steps: Animated React steps for multi-step flows: filling connectors and drawn checks
  • Dropdown Menu: An animated React dropdown menu with icons, shortcuts, checkboxes and keyboard control
  • Context Menu (Pro): A React right-click context menu that opens at the pointer and stays on screen
  • Bottom Nav (Pro): An animated React mobile tab bar with a sliding pill, hopping icons and badges
  • Scroll Progress (Pro): A glowing React scroll progress bar for the page or any scroll container
  • Table of Contents (Pro): A React scroll-spy table of contents with a marker that slides to the section in view
  • Bubble Menu (Pro): An animated React bubble menu that bursts into links on staggered springs
  • Card Nav (Pro): An expanding React card navigation: the menu button opens section cards with rising links
  • Pill Nav (Pro): A React pill navigation with a liquid highlight that glides under links
  • Line Sidebar (Pro): A minimal React sidebar of lines that grow into labelled items on hover
  • Flowing Menu (Pro): A React flowing menu: hovering a link slides in a marquee strip of text and image
  • Radial Menu (Pro): A React radial pie menu: hold, aim and release, or click and use arrow keys
  • Mega Menu (Pro): An animated React mega menu whose panel morphs between items instead of reopening
  • Magnetic Nav (Pro): A React nav whose magnetic underline stretches toward the link you hover
  • Branched Menu (Pro): A React tree menu drawn from a trunk line with a lit path to the active item
  • Menubar (Pro): A React desktop-style menubar with keyboard navigation and shortcuts
  • File Tree (Pro): A React file explorer tree with indent guides and full keyboard navigation
  • Scroll To Top (Pro): A React back-to-top button with a scroll progress ring
  • Expandable Action Bar (Pro): A React selection action bar that rises and expands to reveal more actions
  • Overflow Actions (Pro): A React toolbar that moves actions into a More menu as it narrows

Install one

npx shadcn@latest add https://charcoalui.com/r/tabs.json

Every page shows the exact command. The CLI adds the file to components/ui along with any dependency it needs, and AI coding agents can do the same through the Charcoal UI MCP server.

Other categories

Browse the rest of the library by what you are building.

Frequently asked questions

Do the navigation components work with Next.js links?
Yes. Items render whatever link element you pass or use plain anchors, so Next.js Link, React Router or TanStack Router all work.
Are menus keyboard accessible?
Yes. Menus, the menubar and the file tree follow the WAI-ARIA patterns for their widget: arrow keys move, Enter selects, Escape closes and focus returns to the trigger.
Can I use them on mobile?
Yes. Docks and floating navs have touch-friendly sizes, sidebars become drawers, and nothing depends on hover alone.
Do these navigation components work with shadcn/ui?
Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.