Breadcrumb

PreviousNext

A breadcrumb component for navigation hierarchy.

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>Home</Breadcrumb.Item>
  <Breadcrumb.ArrowIcon asChild>
    <ChevronRight />
  </Breadcrumb.ArrowIcon>
  <Breadcrumb.Item>Documents</Breadcrumb.Item>
  <Breadcrumb.ArrowIcon asChild>
    <ChevronRight />
  </Breadcrumb.ArrowIcon>
  <Breadcrumb.Item active>Projects</Breadcrumb.Item>
</Breadcrumb.Root>

Examples

Simple

Component breadcrumb-simple not found in registry.

With Icons

Component breadcrumb-with-icons not found in registry.

With Links

Component breadcrumb-with-links not found in registry.

Custom Separator

Component breadcrumb-custom-separator not found in registry.