shadcn.io is not affiliated with official shadcn/ui

Shadcn Breadcrumb for React

Shows the current page in a hierarchy.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/breadcrumb.json

npx shadcn@latest add https://kit.dev/r/base/breadcrumb.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/breadcrumb.json

yarn shadcn@latest add https://kit.dev/r/base/breadcrumb.json

Install the following dependencies:

bun add @base-ui/react lucide-react

npm install @base-ui/react lucide-react

pnpm add @base-ui/react lucide-react

yarn add @base-ui/react lucide-react

Copy and paste the following code into your project.

components/ui/breadcrumb.tsx

"use client";

import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
import type React from "react";
import { cn } from "@/lib/utils";

export const Breadcrumb = (props: React.ComponentProps<"nav">) => {
  const { className, ...rest } = props;

  return (
    <nav
      aria-label="breadcrumb"
      className={cn("cn-breadcrumb", className)}
      data-slot="breadcrumb"
      {...rest}
    />

Update the import paths to match your project setup.

Usage

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuGroup,
  MenuItem,
  MenuTrigger,
} from "@/components/ui/menu";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <a href="#">Home</a>
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <Menu positioning={{ placement: "bottom-start" }}>
        <MenuTrigger asChild>
          <Button size="icon-sm" variant="ghost">
            <BreadcrumbEllipsis />
            <span className="sr-only">Toggle menu</span>
          </Button>
        </MenuTrigger>
        <MenuContent>
          <MenuGroup>
            <MenuItem value="documentation">Documentation</MenuItem>
            <MenuItem value="themes">Themes</MenuItem>
            <MenuItem value="github">GitHub</MenuItem>
          </MenuGroup>
        </MenuContent>
      </Menu>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <a href="#">Components</a>
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.
`ArrowDown`	Move down.
`ArrowUp`	Move up.
`ArrowLeft`	Move left.
`ArrowRight`	Move right.
`Home`	Go to the start.
`End`	Go to the end.

Demos

Basic

A basic breadcrumb with a home link and a components link.

PreviewCode

Separator

Use a custom component as children for BreadcrumbSeparator to create a custom separator.

PreviewCode

Compose BreadcrumbItem with Menu to create a dropdown in the breadcrumb.

PreviewCode

Ellipsis

BreadcrumbEllipsis shows a collapsed state when the breadcrumb is too long.

PreviewCode

Link

Use asChild on BreadcrumbLink with a custom link from your routing library.

PreviewCode

Rtl

Right-to-left breadcrumb. See the RTL configuration guide for document direction.

PreviewCode