Breadcrumb

Navigation

Shows the current location within a hierarchy of pages.

Breadcrumbs give users a trail of where they are in the site, letting them hop back to a parent page without using the browser back button.

npx shadcn@latest add breadcrumb

Default

Stack links with a chevron separator and end with the current page.

Preview

Live

tsx

1<Breadcrumb>
2  <BreadcrumbList>
3    <BreadcrumbItem>
4      <BreadcrumbLink href="/">
5        <House className="size-3.5" />
6        Home
7      </BreadcrumbLink>
8    </BreadcrumbItem>
9    <BreadcrumbSeparator />
10    <BreadcrumbItem>
11      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
12    </BreadcrumbItem>
13    <BreadcrumbSeparator />
14    <BreadcrumbItem>
15      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
16    </BreadcrumbItem>
17  </BreadcrumbList>
18</Breadcrumb>

Custom separator

Override the separator with any element you pass as children.

Preview

Live

tsx

1<BreadcrumbSeparator>/</BreadcrumbSeparator>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
className	string	Override the classes of any part via its className prop.
as	React.ElementType	Render any part as a different element.
aria-label	string= "breadcrumb"	Accessible label for the nav landmark.