Tailwind CSS Breadcrumb Components

Dev Design Library indexes 90 Tailwind CSS breadcrumb components from 33 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. Breadcrumb components belong to the Navigation group.

• 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
• 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
• 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
• 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.
• 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…
• 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
• 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.
• 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 Tailwind CSS breadcrumb components

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

Related categories

• Breadcrumb Components
• React Breadcrumb Components
• Animated Breadcrumb Components
• shadcn/ui Breadcrumb Components
• Tailwind CSS 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 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