Breadcrumb

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/breadcrumb.json

npx shadcn@latest add https://prototyper-ui.com/r/breadcrumb.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/breadcrumb.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/breadcrumb.json

This will add the following files to your project:

components/ui/breadcrumb.tsx

Usage

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbPage,
} from "@/components/ui/breadcrumb";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>;

Anatomy

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage />
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Sub-component	`data-slot`	Purpose	Required
`Breadcrumb`	`breadcrumb`	Root `<nav>` with aria-label	Yes
`BreadcrumbList`	`breadcrumb-list`	Ordered list of breadcrumb items	Yes
`BreadcrumbItem`	`breadcrumb-item`	Individual breadcrumb entry	Yes
`BreadcrumbLink`	`breadcrumb-link`	Clickable navigation link	No
`BreadcrumbPage`	`breadcrumb-page`	Current page indicator (non-interactive)	No
`BreadcrumbSeparator`	`breadcrumb-separator`	Visual separator between items	No
`BreadcrumbEllipsis`	`breadcrumb-ellipsis`	Collapsed items indicator	No

Examples

With Ellipsis

Styling

Data Slots

Use data-slot attributes to target specific parts of the breadcrumb:

Slot name	Element
`breadcrumb`	Root `<nav>` wrapper
`breadcrumb-list`	The `<ol>` list
`breadcrumb-item`	Each `<li>` item
`breadcrumb-link`	Clickable `<a>` link
`breadcrumb-page`	Current page `<span>`
`breadcrumb-separator`	Separator `<li>`
`breadcrumb-ellipsis`	Ellipsis indicator `<span>`

Customization Examples

/* Change separator color */
[data-slot="breadcrumb-separator"] {
  @apply text-foreground;
}

{
  /* Custom separator character */
}
<BreadcrumbSeparator>/</BreadcrumbSeparator>;

API Reference

Root navigation element with aria-label="breadcrumb".

Prop

Type

Extends React.ComponentProps<"nav">. All standard nav props are forwarded via ...props.

BreadcrumbList

Ordered list container for breadcrumb items.

Prop

Type

Extends React.ComponentProps<"ol">. All standard ol props are forwarded via ...props.

BreadcrumbItem

Individual breadcrumb entry wrapping a link or page indicator.

Prop

Type

Extends React.ComponentProps<"li">. All standard li props are forwarded via ...props.

BreadcrumbLink

Clickable navigation link within a breadcrumb item.

Prop

Type

Extends React.ComponentProps<"a">. All standard anchor props are forwarded via ...props.

BreadcrumbPage

Current page indicator rendered as a non-interactive span.

Prop

Type

Extends React.ComponentProps<"span">. All standard span props are forwarded via ...props.

BreadcrumbSeparator

Visual separator between breadcrumb items. Defaults to a chevron icon.

Prop

Type

Extends React.ComponentProps<"li">. All standard li props are forwarded via ...props.

BreadcrumbEllipsis

Collapsed items indicator showing a "more" icon.

Prop

Type

Extends React.ComponentProps<"span">. All standard span props are forwarded via ...props.

Accessibility

Keyboard Interactions

Key	Action
`Tab`	Moves focus between breadcrumb links

ARIA Attributes

Breadcrumb renders as a <nav> with aria-label="breadcrumb".
BreadcrumbPage has aria-current="page" to indicate the current location.
BreadcrumbSeparator has aria-hidden="true" to hide decorative separators from screen readers.

On this page