Breadcrumb

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

Installation

npx shadcn@latest add breadcrumb

Usage

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

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

Examples

Basic

Custom Separators

Text Separator

Icon Separator

Styled Breadcrumbs

With Background

With Border

With Dropdown

Note: Actual dropdown functionality requires the Dropdown component

Props

Component	Props	Description
Breadcrumb	The root container for breadcrumbs.
BreadcrumbList	Contains the ordered list of breadcrumb items.
BreadcrumbItem	Each individual item in the breadcrumb list.
BreadcrumbLink	asChild?: boolean href: string	A link element for navigable breadcrumb items.
BreadcrumbPage	The current page breadcrumb item (not a link).
BreadcrumbSeparator	The separator between breadcrumb items. Defaults to a chevron right icon.
BreadcrumbEllipsis	Used for collapsed breadcrumbs, displaying a "more" indicator.

Documentation