Docs › Components › Breadcrumb

Shadcn Breadcrumb

The shadcn/ui Breadcrumb shows where a page sits in the site hierarchy, styled with Tailwind CSS v4. It renders a semantic navigation trail of links ending in the current page, with separators and an optional ellipsis for long paths. Breadcrumbs orient users across ShadcnStore app and store blocks.

Key features

• Semantic nav with links and a current page.
• Custom separators and a collapsing ellipsis.
• Composable parts for full control of markup.
• Styled and dark-mode ready with Tailwind.

Installation

npx shadcn@latest add breadcrumb

Usage

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

export function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Components</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Collapsing long trails

Use BreadcrumbEllipsis for hidden middle items, optionally inside a Dropdown Menu that reveals them.

Anatomy

Part	Purpose
Breadcrumb	The nav landmark.
BreadcrumbList	Ordered list of items.
BreadcrumbLink	A navigable ancestor.
BreadcrumbPage	The current, non-link page.
BreadcrumbSeparator	Divider between items.
BreadcrumbEllipsis	Collapsed middle items.

Composition

BreadcrumbLink accepts render to compose with your framework's link component:

<BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>

Accessibility

• The component exposes a nav landmark labelled "breadcrumb"; keep that label.
• Mark only the current page with BreadcrumbPage (it sets aria-current).
• Ensure separators are decorative and not read as content.

When to use the Breadcrumb

Use a Breadcrumb on pages deep in a hierarchy where users benefit from seeing and jumping to ancestors: product categories, docs, and admin sections. For top-level navigation, use a Navigation Menu. For steps in a flow, use a stepper.

Used in these blocks

• App shells: page location trails.
• Product overview: category trails.
• Order history: section navigation.

Related components

For collapsed items pair the Breadcrumb with a Dropdown Menu; for primary navigation use a Navigation Menu; it often sits above Tabs or a Data Table.

FAQ

What is the shadcn breadcrumb used for?

The Breadcrumb shows the user's location in a site hierarchy as a trail of links ending in the current page.

How do I collapse a long breadcrumb?

Use BreadcrumbEllipsis to represent collapsed middle items, optionally inside a Dropdown Menu for the hidden links.

Should breadcrumbs use real links?

Yes. Use BreadcrumbLink for navigable items and BreadcrumbPage for the current, non-link page.

How do I use my framework's Link component?

Render BreadcrumbLink with render and pass your Link as the element.