shadcn/ui Breadcrumb Components

Dev Design Library indexes 28 shadcn/ui breadcrumb components from 4 open-source UI libraries, with the most coming from Watermelon UI, FLX UI, Shadcn Space and Fluid Functionalism. Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project. Breadcrumb components belong to the Navigation group.

• 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…
• breadcrumb-01 - BreadcrumbShadcn Space · ReactBreadcrumb component
• Breadcrumb 01Watermelon UI · React
• BasicFLX UI · ReactLinks with a current page and chevron separators.
• breadcrumb-02 - BreadcrumbShadcn Space · ReactBreadcrumb component
• Breadcrumb 02Watermelon UI · React
• With iconsFLX UI · ReactEach crumb prefixed with a small icon, such as a house, folder, or file.
• breadcrumb-03 - BreadcrumbShadcn Space · ReactBreadcrumb component
• Breadcrumb 03Watermelon UI · React
• Custom separatorFLX UI · ReactSwap the chevron for a slash via separator children.
• breadcrumb-04 - BreadcrumbShadcn Space · ReactBreadcrumb component
• Breadcrumb 04Watermelon UI · React
• Dot separatorFLX UI · ReactLighter middle dot divider between crumbs.
• breadcrumb-05 - BreadcrumbShadcn Space · ReactBreadcrumb component
• Breadcrumb 1Watermelon UI · React
• With ellipsisFLX UI · ReactMiddle levels replaced by a static ellipsis icon, showing only the first and last crumbs.
• breadcrumb-06 - BreadcrumbShadcn Space · ReactBreadcrumb component
• Breadcrumb 2Watermelon UI · React
• With dropdownFLX UI · ReactGhost icon Button opens a menu of the hidden levels.
• Breadcrumb 3Watermelon UI · React
• Responsive collapseFLX UI · ReactDropdown on small screens, full inline path from sm up.
• Breadcrumb 4Watermelon UI · React
• As linkFLX UI · ReactBreadcrumb links that open in a new tab, with an external-link icon on the outbound crumb.
• Breadcrumb 5Watermelon UI · React
• Dropdown at endFLX UI · ReactLast crumb is a Button switcher for sibling pages.
• Breadcrumb 6Watermelon UI · React
• Breadcrumb 7Watermelon UI · React
• Breadcrumb 8Watermelon UI · React

Libraries with shadcn/ui breadcrumb components

• Watermelon UI
• FLX UI
• Shadcn Space
• Fluid Functionalism

Related categories

• Breadcrumb Components
• React Breadcrumb Components
• Tailwind CSS Breadcrumb Components
• Animated Breadcrumb Components
• shadcn/ui Navigation Components
• shadcn/ui Menu Components
• shadcn/ui Tabs Components
• shadcn/ui Pagination Components
• shadcn/ui Sidebar Components
• shadcn/ui Command Palette Components
• shadcn/ui Navbar Components
• shadcn/ui Stepper Components
• shadcn/ui Wizard Components