GitHub

Go to...

Choose a page to open.

Displays the path to the current page as a list of links.

Breadcrumb

breadcrumb-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/breadcrumb.json

Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

To use the link component of your router, pass it to the render prop.

<BreadcrumbLink render={<Link to="/" />}>Home</BreadcrumbLink>

Examples

Custom separator

Pass a child to BreadcrumbSeparator to replace the chevron.

breadcrumb-custom-separator