Component

Breadcrumb

Accessible navigation trail showing the current page location within a hierarchy.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/breadcrumb

Usage

Use breadcrumbs on pages deeper than 2 levels. The last item is always the current page and not a link.

Playground

Preview

Configure

Code

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Button</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Variants & States

Supported variants, sizes, and interaction states for this component.

Depth

Two levels
Three levels

Do

Keep each label short, 1 to 3 words
Always make the last item non-clickable to indicate the current page

Don't

Don't show breadcrumbs on top-level pages
Don't truncate mid-path, truncate from the beginning if space is limited