Breadcrumbs

Displays the path to the current resource using a hierarchy of links.

Docs API Reference

Component breadcrumbs-demo not found in registry.

Installation

Copy and paste the following code into your project:

Usage

import {
  BreadcrumbList,
  Breadcrumbs,
  BreadcrumbsItem,
  BreadcrumbsLink,
  BreadcrumbsSeparator,
} from "@components/ui/breadcrumbs"
<Breadcrumbs>
  <BreadcrumbList>
    <BreadcrumbsItem>
      <BreadcrumbsLink />
    </BreadcrumbsItem>
    <BreadcrumbsSeparator />
  </BreadcrumbList>
</Breadcrumbs>

Examples

Custom separator

Use the separator prop to provide a default content for all <BreadcrumbsSeparator />. You can pass it a string or a SolidJS component.

Component breadcrumbs-custom-separator-demo not found in registry.

import Icon from "your-library"
 
...
 
<Breadcrumbs separator={<Icon />}>
  <BreadcrumbList>
    <BreadcrumbsItem>
      <BreadcrumbsLink />
    </BreadcrumbsItem>
    <BreadcrumbsSeparator />
  </BreadcrumbList>
</Breadcrumbs>

Dropdown

You can compose <BreadcrumbsItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumbs.

Component breadcrumbs-demo not found in registry.

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
 
...
 
<BreadcrumbsItem>
  <DropdownMenu>
    <DropdownMenuTrigger />
    <DropdownMenuContent>
      <DropdownMenuItem />
      <DropdownMenuItem />
      <DropdownMenuItem />
    </DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbsItem>

Collapsed

We provide a <BreadcrumbsEllipsis /> component to show a collapsed state when the breadcrumbs is too long.

Component breadcrumbs-demo not found in registry.

import { BreadcrumbsEllipsis } from "@/components/ui/breadcrumb"
 
...
 
<Breadcrumbs>
  <BreadcrumbsList>
    {/* ... */}
    <BreadcrumbsItem>
      <BreadcrumbsEllipsis />
    </BreadcrumbsItem>
    {/* ... */}
  </BreadcrumbsList>
</Breadcrumbs>
BadgeButton Group