Tailwind CSS Navigation Components

Dev Design Library indexes 1,253 Tailwind CSS navigation components from 72 open-source UI libraries, with the most coming from ReUI, Watermelon UI, Origin UI, FLX UI and Oxbow UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes.

Showing 120 of 1,253, a mix from every library. Open a library to see all of its components.

• Breadcrumbshadcn/ui · ReactDisplays the path to the current resource using a hierarchy of links.
• BreadcrumbsdaisyUI · CSS (Tailwind)
• BreadcrumbsHeroUI · ReactNavigation breadcrumbs showing the current page's location within a hierarchy
• DockMagic UI · ReactAn implementation of the MacOS dock using react + tailwindcss + motion
• Action MenuReact Spectrum · ReactActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
• Breadcrumbcoss ui · ReactDisplays the path to the current resource using a hierarchy of links.
• BreadcrumbOrigin UI · ReactDisplays the path to the current resource using a hierarchy of links.
• Scroll NavPreline UI · JavaScript (HTML + Tailwind)
• Ai InstructionsCult UI · ReactManage and toggle AI instructions with a popover, search, and create-dialog
• Dropdown MenuTremor · React
• Basic breadcrumbReUI · ReactBasic breadcrumb
• Ab Segmented TabsAmicro Micro Transitions · ReactSegmented control where active letter (A or B) slides into a solid pill.
• Model SelectorAI Elements · ReactA searchable command palette for selecting AI models in your chat interface.
• Command PaletteKokonut UI · React⌘K command palette with nested pages, fuzzy matching and in-row progress for running actions.
• breadcrumbsIntent UI · Reactbreadcrumbs
• App NavigationUntitled UI React · React
• Adaptive StepperbeUI · ReactComposable numeric stepper whose fixed footprint adapts at its minimum and maximum while the value rolls between steps.
• BreadcrumbsTailGrids · ReactBreadcrumbs component with multiple variants and support for icons.
• Bounce SidebarRare UI · ReactA vertical navigation list with a bouncy, spring-animated active indicator.
• Circular NavbarSpectrum UI · Reactcomponent for the Circular Navbar
• Awwwards NavVengeance UI · ReactGlass bottom nav that expands into a mega-menu
• Ask User QuestionsFluid Functionalism · ReactStepped question flow with numbered options, keyboard shortcuts (1–9), single or multi-select, inline 'other' text…
• BreadcrumbToolcraft · React
• Dropdown MenuLaunch UI · React
• BreadcrumbPanel UI · React NativeThe trail of links back up the hierarchy to the current page.
• Animated List 02 - Setup StepsShadcn Space · ReactSetup Steps component
• Claude SidebarPixel Perfect · ReactClaude-style sidebar built on shadcn/ui's <Sidebar> primitives. Smooth icon-rail collapse animation, playful icon…
• App DockOpenSourceUI · React
• Bento Carduselayouts · ReactAn interactive bento card with animated tabs and workspace preview.
• App ShellBoardUI · ReactThe page standard every BoardUI template follows, free or Pro: content sits directly on the page background inside a…
• Magnetic DockComponentry · ReactMacOS style dock that scales items based on mouse proximity.
• Dropdown MenuTremor Blocks · React
• BreadcrumbShadcn Dashboard · React
• Faq Fourcnblocks · SvelteFAQ section with search and categories
• Arc TimelineAnimations (Svelte) · SvelteA curved timeline that rotates through milestone steps with clickable markers, icons, and configurable spacing.
• Model SelectorAI Elements (Svelte) · SvelteA searchable model selector dialog built on command and dialog primitives.
• DockBadtz UI · ReactAn interactive icon dock that smoothly scales icons/images on hover, providing a responsive and engaging visual effect.
• BreadcrumbObsidianUI · React
• Chat MinimapNotra · ReactA rail of lines that maps a conversation, built on shadcn Button, Card, HoverCard and Tooltip.
• Fluid App DockGreatUI · ReactA glass app dock whose icons magnify and spread under the cursor with spring physics.
• Breadcrumbs 02Oxbow UI · AstroBreadcrumb with dropdown menu
• Adaptive ActionsNexvyn UI · ReactA responsive action toolbar that measures its available inline size and moves overflowed items into an accessible…
• Soundboardaudiocn · ReactA grid of sound pads with global hotkeys, per-pad mode and volume in a context menu, master volume, stop all, and…
• Animated TabsForge UI · Reactwitch tabs smoothly with motion-based underline or highlight effects.
• breadcrumbsBaseLayer · ReactBreadcrumbs display a heirarchy of links to the current page or resource in an application.
• Bottom NavigationShark UI · ReactFixed bottom nav for mobile-first apps.
• Curtain Reveal NavbarRewamp UI · ReactNavigation bar whose menu opens like a curtain sliding down over the page.
• Animated DropdownSona UI · ReactA composable, accessible dropdown menu built on Base UI with controlled state, interruptible hover highlighting, and…
• Fluid TabsWatermelon UI · ReactTabs with an indicator that flows smoothly from one tab to the selected one.
• App Shell 2sv-efferd · SvelteA compact dashboard shell with a collapsible sidebar, sticky header, and structured content skeleton.
• Data Table Column Headersv-table · SvelteA table heading with sorting, pinning, ordering, and visibility actions.
• Component Previewglasscn · ReactA preview shell for component demos with switchable default and glass variants.
• Back To TopUI Lab · ReactFills its ring as you read, and when you press it the arrow lifts off while the page glides back up.
• BreadcrumbHextaUI · ReactA trail of links to the current page that wraps safely, mirrors in right-to-left layouts and expands collapsed…
• ArtifactLocalMode · ReactA Claude-style docked side-panel/canvas shell (header, title, description, copy/download/refresh/close toolbar…
• Action dockCojeev UI · ReactA reusable action dock composed from Cojeev base components.
• Blur Glide MenuMicroKit · ReactA nested menu whose steps blur before they glide aside, while the surface animates to the height of the step arriving.
• BasicFLX UI · ReactLinks with a current page and chevron separators.
• Animated SidebarVelora UI · ReactIcon rail that expands on hover or focus and turns into a drawer on narrow screens.
• Basic Menusv-particles · Svelte
• BreadcrumbsMetal UI · React + SwiftUIWhere you are, as a path you can climb: levels above in ink2, the current in ink, engraved chevrons between; a new…
• Ai Chat WorkspaceSpaceUI · ReactFull-featured AI Studio chat workspace template featuring conversational threads, multi-model selection, real-time…
• Apple Mail TabsSkecher UI · ReactA colorful, horizontally scrollable mail category selector with compact inactive tabs and an expanded active tab.
• Base Context MenuSora UI · ReactAn accessible context menu built on Base UI with smooth Motion spring scale and submenu slide animations.
• MenuOUI · ReactReact aria components Menu with shadcn characteristics.
• AI Writing AssistantD2Studio UI · ReactAI writing assistant panel with assistant, blog and pro modes and a prompt field.
• Command PaletteEaseUI · ReactCommand-K style search overlay that filters as you type, with arrow keys to move the highlight and Enter to select.
• Glass Code BlockOpaline · ReactSyntax-highlighted code in a glass window, with tabs, line numbers, highlighted lines and copy.
• Chapter ScrubberFibo · ReactA rail of marks that swell under the pointer like the Dock, previewing the chapter at the crest.
• Back to TopReactFrame · ReactA floating scroll-to-top button that fades in past a threshold, with an optional progress ring showing how far down…
• Code BlockAceternity UI · React
• Breadcrumbark-cn · ReactA shadcn-style breadcrumb component built with Ark UI primitives.
• Commandshadcn/ui · ReactCommand menu for search and quick actions.
• DockdaisyUI · CSS (Tailwind)
• DropdownHeroUI · ReactA dropdown displays a list of actions or options that a user can choose
• BreadcrumbsReact Spectrum · ReactBreadcrumbs show hierarchy and navigational context for a user’s location within an application.
• Commandcoss ui · ReactA command palette component built with Dialog and Autocomplete for searching and executing commands.
• CommandOrigin UI · ReactA command palette component built with Dialog and Autocomplete for searching and executing commands.
• ScrollspyPreline UI · JavaScript (HTML + Tailwind)
• Code BlockCult UI · ReactA beautiful code block component with tabs, copy functionality, and smooth animations
• Tab NavigationTremor · React
• Pill-style breadcrumb inside frameReUI · ReactPill-style breadcrumb inside frame
• Progress StepperAmicro Micro Transitions · ReactHorizontal step line (STEP 1 → STEP 2 → STEP 3) with animated fill bar.
• Open In ChatAI Elements · ReactA dropdown menu for opening queries in various AI chat platforms including ChatGPT, Claude, T3, Scira, and v0.
• AI Input SelectorKokonut UI · ReactAI chat input with a model menu, a separate Effort control, file chips you can drop or paste, a / command menu, and…
• command-menuIntent UI · Reactcommand-menu
• DropdownUntitled UI React · React
• Ai SidebarbeUI · ReactComposes the shell with editable projects, folders, files, and bookmarks.
• CommandTailGrids · ReactA command menu component with multiple variants.
• Gooey NavRare UI · ReactA gooey navigation bar that separates the selected item from the group.
• Command PaletteSpectrum UI · ReactA fully customizable, smooth-animated Command Palette (Cmd+K) component
• Mega Menu NavbarVengeance UI · ReactResponsive SaaS navbar with rich dropdowns and a mobile drawer
• BreadcrumbFluid Functionalism · ReactA trail of links to the current page with one fluid hover across every crumb. Steps can lead with an icon, open a…
• Channel TabsToolcraft · React
• Mode ToggleLaunch UI · React
• Page HeaderPanel UI · React NativeCover, face and actions at the top of a profile.
• DefaultShadcn Space · ReactApple Dock component
• Glass Scroll NavbarPixel Perfect · ReactA fixed glass navbar refracts scrolling editorial images through a curved lens with spectral color separation.
• Editor Tool DockOpenSourceUI · React
• Bottom Menuuselayouts · ReactA floating bottom navigation menu with smooth interactions.
• BreadcrumbBoardUI · ReactPath trail with collapsing levels.
• CommandComponentry · React
• Tab NavigationTremor Blocks · React
• CommandShadcn Dashboard · React
• Feature Fourteencnblocks · SvelteFeature section with numbered steps
• DockAnimations (Svelte) · SvelteA macOS-style dock component with smooth magnification animation on hover, inspired by the macOS dock.
• Open In ChatAI Elements (Svelte) · SvelteA provider menu for opening prompts in external chat and AI tools.
• CommandObsidianUI · React
• ChatGPT Model SelectorNotra · ReactThe hover-to-open effort chip with Model and Effort submenus, built on shadcn DropdownMenu.
• Fluid Dock CarouselGreatUI · ReactA carousel driven by a fluid dock of thumbnails, with swipe, arrows and keyboard navigation.
• Breadcrumbs 06Oxbow UI · AstroBreadcrumb With Select Crumb
• Bounce SidebarNexvyn UI · ReactA sidebar navigation with a bouncing dot indicator that smoothly animates between items using spring physics.
• commandBaseLayer · ReactA command palette that allows users to quickly search and execute commands using keyboard shortcuts.
• BreadcrumbShark UI · ReactShows user location within a hierarchy.
• Fluid Wave NavbarRewamp UI · ReactNavigation bar with a fluid wave that follows the hovered or active item.
• Animated TabsSona UI · ReactAn accessible horizontal tab selector built on Base UI with controlled state, keyboard navigation, disabled items, and…
• Fluid Tabs BaseWatermelon UI · ReactTabs with an indicator that flows smoothly from one tab to the selected one.
• FAQ Foursv-efferd · SvelteA categorized FAQ explorer with topic switching and softly framed accordion rows.
• Data Table Faceted Filtersv-table · SvelteA searchable multi-select filter with live counts for categorical table columns.
• Glass Commandglasscn · ReactGlass Command with five variants: clear, frosted, subtle, liquid, and liquid-refract

Libraries with Tailwind CSS navigation components

• ReUI
• Watermelon UI
• Origin UI
• FLX UI
• Oxbow UI

Related categories

• Navigation Components
• React Navigation Components
• Svelte Navigation Components
• React Native Navigation Components
• Animated Navigation Components
• shadcn/ui Navigation Components
• Tailwind CSS Menu Components
• Tailwind CSS Tabs Components
• Tailwind CSS Stepper Components
• Tailwind CSS Navbar Components
• Tailwind CSS Sidebar Components
• Tailwind CSS Pagination Components
• Tailwind CSS Breadcrumb Components
• Tailwind CSS Command Palette Components
• Tailwind CSS Context Menu Components
• Tailwind CSS Mega Menu Components
• Tailwind CSS Dock Components
• Tailwind CSS Wizard Components
• Tailwind CSS Table Of Contents Components
• Tailwind CSS Tab Bar Components
• Tailwind CSS Hamburger Menu Components