Breadcrumb

PreviousNext

A breadcrumb component for navigation hierarchy built with React Aria Components.

Component breadcrumb-demo not found in registry.

Installation

pnpm dlx shadcn@latest add breadcrumb

Usage

import * as Breadcrumb from "@/components/ui/breadcrumb"
<Breadcrumb.Root>
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Separator>
    <ChevronRight />
  </Breadcrumb.Separator>
  <Breadcrumb.Item href="/documents">Documents</Breadcrumb.Item>
  <Breadcrumb.Separator>
    <ChevronRight />
  </Breadcrumb.Separator>
  <Breadcrumb.Item>Projects</Breadcrumb.Item>
</Breadcrumb.Root>

Examples

Simple

Component breadcrumb-simple not found in registry.

With Icons

Component breadcrumb-with-icons not found in registry.

Component breadcrumb-with-links not found in registry.

Custom Separator

Component breadcrumb-custom-separator not found in registry.