Breadcrumb

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

Installation

npx shadcn@latest add https://exawizards.com/exabase/design/registry/breadcrumb.json

Usage

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

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

API

Props of each element are available.

Component	Element
`Breadcrumb`	`nav`
`BreadcrumbList`	`ol`
`BreadcrumbItem`	`li`
`BreadcrumbLink`	`a`
`BreadcrumbPage`	`span`
`BreadcrumbSeparator`	`li`
`BreadcrumbEllipsis`	`span`

Examples

Collapsed

Dropdown

Link component

To use a custom link component from your routing library, you can use the asChild prop on <BreadcrumbLink />.

Badge Button