Breadcrumb Components

Dev Design Library indexes 100 breadcrumb components from 41 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. Breadcrumb components belong to the Navigation group.

• Breadcrumbshadcn/ui · ReactDisplays the path to the current resource using a hierarchy of links.
• BreadcrumbsMUI / Material UI · React
• 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
• BreadcrumbsReact Spectrum · ReactBreadcrumbs show hierarchy and navigational context for a user’s location within an application.
• 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.
• Basic breadcrumbReUI · ReactBasic breadcrumb
• BreadcrumbPark UI · ReactA navigation component showing the user's location within a site hierarchy.
• BreadcrumbLobe UI · React
• breadcrumbsIntent UI · Reactbreadcrumbs
• BreadcrumbbeUI · ReactComposable breadcrumb navigation with soft path transitions, a hoverable overflow dropdown for long trails, custom…
• BreadcrumbsTailGrids · ReactBreadcrumbs component with multiple variants and support for icons.
• BreadcrumbVengeance UI · React
• 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…
• BreadcrumbToolcraft · React
• BreadcrumbPanel UI · React NativeThe trail of links back up the hierarchy to the current page.
• breadcrumb-01 - BreadcrumbShadcn Space · ReactBreadcrumb component
• BreadcrumbBoardUI · ReactPath trail with collapsing levels.
• BreadcrumbShadcn Dashboard · React
• BreadcrumbObsidianUI · React
• Breadcrumbs 02Oxbow UI · AstroBreadcrumb with dropdown menu
• BreadcrumbsNexvyn UI · ReactA horizontal trail of links that auto-collapses into an ellipsis button when the trail exceeds maxItems.
• breadcrumbsBaseLayer · ReactBreadcrumbs display a heirarchy of links to the current page or resource in an application.
• BreadcrumbShark UI · ReactShows user location within a hierarchy.
• Smart BreadcrumbsSona UI · React
• BreadcrumbWatermelon UI · React
• BreadcrumbArc Library · ReactShow where a page sits in a hierarchy.
• BreadcrumbsUI Lab · ReactFolds the middle of a deep path into a menu when space runs out.
• BreadcrumbHextaUI · ReactA trail of links to the current page that wraps safely, mirrors in right-to-left layouts and expands collapsed…
• BreadcrumbCojeev UI · ReactFind your place with a complete trail, a pocket-sized ancestor menu or a connected directory path.
• BasicFLX UI · ReactLinks with a current page and chevron separators.
• BreadcrumbHalaska 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…
• BreadcrumbSpaceUI · ReactDisplays a horizontal trail of links showing the user’s current location within the page hierarchy, making navigation…
• Aria BreadcrumbReScript shadcn · ReScript
• Liquid BreadcrumbsLiquefy UI · ReactBreadcrumb navigation in liquid glass style.
• BreadcrumbD2Studio UI · ReactDisplays the path to the current resource using a hierarchy of links.
• BreadcrumbReactFrame · ReactAn accessible breadcrumb trail with 4 separator styles, an optional home icon, animated collapse of long paths behind…
• Breadcrumbark-cn · ReactA shadcn-style breadcrumb component built with Ark UI primitives.
• Tailwind BreadcrumbsReact Spectrum · React
• Comp 446Origin UI · React
• Pill-style breadcrumb inside frameReUI · ReactPill-style breadcrumb inside frame
• Dashboard BreadcrumbLobe UI · React
• Web BreadcrumbPanel UI · React NativeBreadcrumb trails with separators, collapsed middles and long-title truncation.
• breadcrumb-02 - BreadcrumbShadcn Space · ReactBreadcrumb component
• Breadcrumbs 06Oxbow UI · AstroBreadcrumb With Select Crumb
• Breadcrumb 01Watermelon UI · React
• With iconsFLX UI · ReactEach crumb prefixed with a small icon, such as a house, folder, or file.
• Base BreadcrumbReScript shadcn · ReScript
• Vanilla BreadcrumbsReact Spectrum · React
• Comp 447Origin UI · React
• Breadcrumb items containing badge with countReUI · ReactBreadcrumb items containing badge with count
• breadcrumb-03 - BreadcrumbShadcn Space · ReactBreadcrumb component
• Breadcrumbs 01Oxbow UI · Astro
• Breadcrumb 02Watermelon UI · React
• Custom separatorFLX UI · ReactSwap the chevron for a slash via separator children.
• Comp 448Origin UI · React
• Breadcrumb starting with home icon itemReUI · ReactBreadcrumb starting with home icon item
• breadcrumb-04 - BreadcrumbShadcn Space · ReactBreadcrumb component
• Breadcrumbs 03Oxbow UI · Astro
• Breadcrumb 03Watermelon UI · React
• Dot separatorFLX UI · ReactLighter middle dot divider between crumbs.
• Comp 449Origin UI · React
• Breadcrumb with a custom separatorReUI · ReactBreadcrumb with a custom separator
• breadcrumb-05 - BreadcrumbShadcn Space · ReactBreadcrumb component
• Breadcrumbs 04Oxbow UI · Astro
• Breadcrumb 04Watermelon UI · React
• With ellipsisFLX UI · ReactMiddle levels replaced by a static ellipsis icon, showing only the first and last crumbs.
• Comp 450Origin UI · React
• Button-style breadcrumbReUI · ReactButton-style breadcrumb
• breadcrumb-06 - BreadcrumbShadcn Space · ReactBreadcrumb component
• Breadcrumbs 05Oxbow UI · Astro
• Breadcrumb 1Watermelon UI · React
• With dropdownFLX UI · ReactGhost icon Button opens a menu of the hidden levels.
• Comp 451Origin UI · React
• Breadcrumb with project, user and document infoReUI · ReactBreadcrumb with project, user and document info
• Breadcrumbs 07Oxbow UI · Astro
• Breadcrumb 2Watermelon UI · React
• Responsive collapseFLX UI · ReactDropdown on small screens, full inline path from sm up.
• Comp 452Origin UI · React
• Breadcrumb with dropdown menuReUI · ReactBreadcrumb with dropdown menu
• Breadcrumb 3Watermelon UI · React
• As linkFLX UI · ReactBreadcrumb links that open in a new tab, with an external-link icon on the outbound crumb.
• Comp 453Origin UI · React
• Breadcrumb with Next.js linkReUI · ReactBreadcrumb with Next.js link
• Breadcrumb 4Watermelon UI · React
• Dropdown at endFLX UI · ReactLast crumb is a Button switcher for sibling pages.
• Breadcrumb with a custom slash separatorReUI · ReactBreadcrumb with a custom slash separator
• Breadcrumb 5Watermelon UI · React
• Breadcrumb with icons for each itemReUI · ReactBreadcrumb with icons for each item
• Breadcrumb 6Watermelon UI · React
• Breadcrumb with ellipsis for long pathsReUI · ReactBreadcrumb with ellipsis for long paths
• Breadcrumb 7Watermelon UI · React
• Breadcrumb items with avatarsReUI · ReactBreadcrumb items with avatars
• Breadcrumb 8Watermelon UI · React
• Breadcrumb with double chevron separatorsReUI · ReactBreadcrumb with double chevron separators
• Breadcrumb inside cardReUI · ReactBreadcrumb inside card
• Error breadcrumbsReUI · ReactThe events that led to a crash, the response body of the request behind it, and the stack trace below.

Libraries with breadcrumb components

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

Related categories

• React Breadcrumb Components
• Tailwind CSS Breadcrumb Components
• Animated Breadcrumb Components
• shadcn/ui Breadcrumb Components
• Navigation Components
• Menu Components
• Tabs Components
• Stepper Components
• Navbar Components
• Pagination Components
• Sidebar 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