Your ImageYour Image
  • About
  • Templates10
  • Blocks81New
  • Icons1635
  • Graphics4K
  • Components107New
  • About
  • Components
  • Pricing
  • Contact
Book an Intro call
Book an Intro call
  • About
  • Works
  • Pricing
  • Templates
  • Blocks
  • components
  • Graphic
  • Backgrounds
  • Designs
  • Icons
  • Logos
  • Flags
  • Privacy
  • Terms
  • Contact
© 2025Made with by Ali Imam

  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button

Breadcrumb

PreviousNext

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

Installation

pnpm dlx shadcn@latest add breadcrumb

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>
BadgeButton

On This Page

InstallationUsage