Dev Design LibraryNavigation Components
Dev Design Library indexes 1,407 navigation components from 92 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.
Showing 120 of 1,407, 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.
App BarMUI / Material UI · React
Branched MenuReact Bits · ReactCollapsible menu whose sections unfold into a trunk with a curved branch to each child, and an accent line that…
BreadcrumbsdaisyUI · CSS (Tailwind)
BreadcrumbChakra UI · ReactUsed to display a page's location within a site's hierarchical structure
BreadcrumbsHeroUI · ReactNavigation breadcrumbs showing the current page's location within a hierarchy
MenuHeadless UI · React
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.
Context MenuRadix Themes · React
Scroll NavPreline UI · JavaScript (HTML + Tailwind)
Ai InstructionsCult UI · ReactManage and toggle AI instructions with a popover, search, and create-dialog
MenuArk UI · ReactA list of options that appears when a user interacts with a button.
Dropdown Menu Morphtransitions.dev · HTML/CSSButton that grows and changes shape into its dropdown menu instead of opening a separate panel.
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.
BreadcrumbPark UI · ReactA navigation component showing the user's location within a site hierarchy.
BurgerLobe UI · ReactA responsive navigation control that opens a drawer of menu items from a hamburger button.
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…
MenuUser Interface Wiki · React
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.
Command Palette BloomKinetics · HTML/CSSA compact trigger unfolds into a staggered action lens
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.
Floating DockSwiftPieces · SwiftUIA floating glass dock where each item is its own bubble; drag across it to lift each item and read its name, release…
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.
BreadcrumbArc Library · ReactShow where a page sits in a hierarchy.
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.
CommandROI UI · ReactA command palette component.
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.
Subtle TabsHalaska UI · ReactTabs with a background pill that springs to the selected tab.
Basic Menusv-particles · Svelte
Liquid TabsPin UI · React
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…
Aria BreadcrumbReScript shadcn · ReScript
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.
Crypto OrbitZAYX · React Native
Nested Dark Context MenuCue Foundations · React
MenuOUI · ReactReact aria components Menu with shadcn characteristics.
Liquid BreadcrumbsLiquefy UI · ReactBreadcrumb navigation in liquid glass style.
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.
Bottom NavigationMUI / Material UI · React
Bubble MenuReact Bits · ReactNavigation bar of round bubbles (logo and toggle) that opens a full-screen overlay of pill-shaped menu links popping in.
DockdaisyUI · CSS (Tailwind)
CommandChakra UI · ReactUsed to build searchable command menus, search dialogs, and pickers.
DropdownHeroUI · ReactA dropdown displays a list of actions or options that a user can choose
TabHeadless UI · React
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.
Dropdown MenuRadix Themes · React
ScrollspyPreline UI · JavaScript (HTML + Tailwind)
Code BlockCult UI · ReactA beautiful code block component with tabs, copy functionality, and smooth animations
Navigation MenuArk UI · ReactA collection of links and menus for website navigation.
Gooey Plus Menutransitions.dev · HTML/CSS
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.
MenuPark UI · ReactA dropdown component for displaying a list of actions or options.
Context MenuLobe UI · ReactContextMenu provides an imperative API to open a menu at the last pointer position. Render a host once and call…
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
Libraries with navigation components
Related categories
- React Navigation Components
- Tailwind CSS Navigation Components
- Svelte Navigation Components
- React Native Navigation Components
- Animated Navigation Components
- shadcn/ui Navigation Components
- Menu Components
- Tabs Components
- Stepper Components
- Navbar Components
- Pagination Components
- Sidebar Components
- Breadcrumb Components
- Command Palette Components
- Context Menu Components
- Mega Menu Components
- Dock Components
- Wizard Components
- Table Of Contents Components
- Tab Bar Components
- Hamburger Menu Components
- Floating Navbar Components