Buttons

Data Display

Feedback

Forms

Layout

Media

Navigation

Overlays

Pickers

Breadcrumb

Displays the path to the current resource using a hierarchy of links. Built with Base UI and Tailwind CSS. Copy-paste ready.

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

export default function Particle() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <Menu>
            <MenuTrigger
              render={
                <Button
                  className="-m-1.5 text-muted-foreground"
                  size="icon-sm"
                  variant="ghost"
                />
              }
            >
              <BreadcrumbEllipsis />
            </MenuTrigger>
            <MenuPopup align="start">
              <MenuItem render={<Link href="/docs" />}>Docs</MenuItem>
              <MenuItem render={<Link href="/particles" />}>Particles</MenuItem>
            </MenuPopup>
          </Menu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink render={<Link href="/docs/" />}>
            Components
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Installation


pnpm dlx shadcn@latest add @cnippet/breadcrumb

Usage

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Examples

With custom separator

Replaces the default / separator with a custom icon such as ChevronRight for a more modern navigation style.

import Link from "next/link";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

export default function Particle() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator> / </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbLink render={<Link href="/docs/" />}>
            Components
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator> / </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Collapses intermediate path segments into a Menu dropdown triggered by the BreadcrumbEllipsis for long paths.

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/menu";

export function Pattern() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <DropdownMenu>
            <DropdownMenuTrigger
              render={<Button size="icon-sm" variant="ghost" />}
            >
              <BreadcrumbEllipsis aria-hidden="true" />
              <span className="sr-only">Toggle menu</span>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuItem>Documentation</DropdownMenuItem>
              <DropdownMenuItem>Themes</DropdownMenuItem>
              <DropdownMenuItem>GitHub</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

With Next.js Link

Replaces the anchor elements with next/link for client-side navigation in Next.js applications.

import Link from "next/link";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

export function Pattern() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink render={<Link href="#" />}>Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink render={<Link href="#" />}>Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

With Icons

Prepends an icon to each breadcrumb link to visually indicate the resource type (file, folder, home).

import { HouseIcon, LayoutDashboardIcon, SettingsIcon } from "lucide-react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

export function Pattern() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink className="flex items-center gap-1.5" href="#">
            <HouseIcon className="size-4" />
            Home
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink className="flex items-center gap-1.5" href="#">
            <LayoutDashboardIcon className="size-4" />
            Components
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage className="flex items-center gap-1.5">
            <SettingsIcon className="size-4" />
            Settings
          </BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

With Avatar

Replaces the last breadcrumb item with an Avatar to represent the current user or profile page.

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

export function Pattern() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink className="flex items-center gap-2" href="#">
            <Avatar className="size-5 rounded-sm">
              <AvatarImage src="https://github.com/vercel.png" />
              <AvatarFallback>VC</AvatarFallback>
            </Avatar>
            Vercel
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink className="flex items-center gap-2" href="#">
            <Avatar className="size-5">
              <AvatarImage src="https://github.com/shadcn.png" />
              <AvatarFallback>CN</AvatarFallback>
            </Avatar>
            @shadcn
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Projects</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Inside Card

Renders the breadcrumb inside a Card header to provide navigation context for detail or settings views.

import { HouseIcon } from "lucide-react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Card, CardContent } from "@/components/ui/card";

export function Pattern() {
  return (
    <Card className="p-2">
      <CardContent className="px-1 py-0">
        <Breadcrumb>
          <BreadcrumbList className="gap-1.5 sm:gap-1.5">
            <BreadcrumbItem>
              <BreadcrumbLink className="flex items-center gap-1.5" href="#">
                <HouseIcon aria-hidden="true" className="size-4" />
                Home
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Products</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage className="font-semibold">
                Checkout
              </BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </CardContent>
    </Card>
  );
}

With Home Icon

Uses a house icon in place of the text "Home" for the first item to reduce visual weight on space-constrained headers.

import { HouseIcon } from "lucide-react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";

export function Pattern() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink
            href="#"
            render={<Button size="icon" variant="outline" />}
          >
            <HouseIcon className="size-4" />
            <span className="sr-only">Home</span>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Help Center</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Getting Started</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Button-style

Renders each breadcrumb item as a pill-shaped button for a more interactive, tab-like navigational appearance.

import {
  ChevronRightIcon,
  HouseIcon,
  LayoutGridIcon,
  SettingsIcon,
} from "lucide-react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";

export function Pattern() {
  return (
    <Breadcrumb>
      <BreadcrumbList className="sm:gap-1">
        <BreadcrumbItem>
          <BreadcrumbLink
            href="#"
            render={<Button size="sm" variant="ghost" />}
          >
            <HouseIcon />
            Home
          </BreadcrumbLink>
        </BreadcrumbItem>

        <BreadcrumbSeparator>
          <ChevronRightIcon />
        </BreadcrumbSeparator>

        <BreadcrumbItem>
          <BreadcrumbLink
            href="#"
            render={<Button size="sm" variant="ghost" />}
          >
            <LayoutGridIcon />
            Workspace
          </BreadcrumbLink>
        </BreadcrumbItem>

        <BreadcrumbSeparator>
          <ChevronRightIcon />
        </BreadcrumbSeparator>

        <BreadcrumbItem>
          <BreadcrumbPage>
            <Button size="sm" variant="secondary">
              <SettingsIcon />
              Settings
            </Button>
          </BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

With Project and User Info

A rich breadcrumb including avatar, project name, and document labels, suited for collaborative app page headers.

import { FileTextIcon } from "lucide-react";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Frame, FramePanel } from "@/components/ui/frame";

export function Pattern() {
  return (
    <Frame>
      <FramePanel>
        <Breadcrumb>
          <BreadcrumbList className="gap-3">
            <BreadcrumbItem>
              <BreadcrumbLink
                className="flex items-center gap-2 text-foreground"
                href="#"
              >
                <Avatar className="size-6">
                  <AvatarImage src="https://github.com/vercel.png" />
                  <AvatarFallback>VC</AvatarFallback>
                </Avatar>
              </BreadcrumbLink>
            </BreadcrumbItem>

            <BreadcrumbSeparator className="text-muted-foreground/60">
              /
            </BreadcrumbSeparator>

            <BreadcrumbItem>
              <BreadcrumbLink className="flex items-center gap-3" href="#">
                <Avatar className="size-6">
                  <AvatarImage
                    className="object-cover"
                    src="https://github.com/shadcn.png"
                  />
                  <AvatarFallback>MP</AvatarFallback>
                </Avatar>
                <div className="flex flex-col">
                  <span className="font-medium text-foreground leading-tight">
                    shadcn
                  </span>
                  <span className="text-muted-foreground leading-tight">
                    ui@shadcn.com
                  </span>
                </div>
              </BreadcrumbLink>
            </BreadcrumbItem>

            <BreadcrumbSeparator className="text-muted-foreground/60">
              /
            </BreadcrumbSeparator>

            <BreadcrumbItem>
              <BreadcrumbPage className="flex items-center gap-2.5">
                <span className="flex size-6 items-center justify-center rounded-md bg-sky-100 text-sky-500 dark:bg-sky-500/10 dark:text-sky-400">
                  <FileTextIcon className="size-3.5" />
                </span>
                <div className="flex flex-col">
                  <span className="font-medium text-foreground leading-tight">
                    Document
                  </span>
                  <span className="flex items-center gap-1 text-muted-foreground leading-tight">
                    agents.md
                  </span>
                </div>
              </BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </FramePanel>
    </Frame>
  );
}

File Path

Renders a filesystem path using folder and file icons in monospace font with a / separator, ideal for code editors or file explorers.

import { FileIcon, FolderIcon } from "lucide-react";
import { Fragment } from "react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Frame, FramePanel } from "@/components/ui/frame";

const segments = [
  { href: "#", icon: FolderIcon, label: "projects" },
  { href: "#", icon: FolderIcon, label: "ui-cnippet" },
  { href: "#", icon: FolderIcon, label: "apps" },
  { href: "#", icon: FolderIcon, label: "v2" },
  { href: "#", icon: FolderIcon, label: "registry" },
];
const current = { icon: FileIcon, label: "registry-variants.ts" };

export function Pattern() {
  return (
    <Frame>
      <FramePanel className="overflow-x-auto">
        <Breadcrumb>
          <BreadcrumbList className="flex-nowrap sm:gap-1">
            {segments.map((seg) => (
              <Fragment key={seg.label}>
                <BreadcrumbItem>
                  <BreadcrumbLink
                    className="flex items-center gap-1 font-mono text-xs"
                    href={seg.href}
                  >
                    <seg.icon className="size-3.5 shrink-0 text-muted-foreground" />
                    {seg.label}
                  </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator className="text-muted-foreground/50">
                  /
                </BreadcrumbSeparator>
              </Fragment>
            ))}
            <BreadcrumbItem>
              <BreadcrumbPage className="flex items-center gap-1 font-mono text-xs">
                <current.icon className="size-3.5 shrink-0 text-sky-500" />
                {current.label}
              </BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </FramePanel>
    </Frame>
  );
}

Checkout Steps

A multi-step progress breadcrumb with numbered circles and check icons for completed steps, plus Back and Continue navigation buttons.

"use client";

import { CheckIcon } from "lucide-react";
import { Fragment, useState } from "react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";

const steps = [
  { id: 1, label: "Cart" },
  { id: 2, label: "Shipping" },
  { id: 3, label: "Payment" },
  { id: 4, label: "Review" },
];

export function Pattern() {
  const [current, setCurrent] = useState(2);

  return (
    <div className="flex flex-col items-center gap-6">
      <Breadcrumb>
        <BreadcrumbList className="gap-1 sm:gap-1">
          {steps.map((step, i) => {
            const done = step.id < current;
            const active = step.id === current;
            return (
              <Fragment key={step.id}>
                <BreadcrumbItem>
                  {active ? (
                    <BreadcrumbPage className="flex items-center gap-1.5">
                      <span className="flex size-5 items-center justify-center rounded-full bg-primary font-bold text-[10px] text-primary-foreground">
                        {step.id}
                      </span>
                      <span className="font-semibold text-sm">
                        {step.label}
                      </span>
                    </BreadcrumbPage>
                  ) : (
                    <button
                      className={`flex items-center gap-1.5 text-sm ${done ? "text-foreground" : "text-muted-foreground/50"}`}
                      disabled={!done}
                      onClick={() => done && setCurrent(step.id)}
                      type="button"
                    >
                      <span
                        className={`flex size-5 items-center justify-center rounded-full font-bold text-[10px] ${
                          done
                            ? "bg-emerald-500 text-white"
                            : "border text-muted-foreground/50"
                        }`}
                      >
                        {done ? <CheckIcon className="size-3" /> : step.id}
                      </span>
                      {step.label}
                    </button>
                  )}
                </BreadcrumbItem>
                {i < steps.length - 1 && <BreadcrumbSeparator />}
              </Fragment>
            );
          })}
        </BreadcrumbList>
      </Breadcrumb>
      <div className="flex gap-2">
        <Button
          disabled={current === 1}
          onClick={() => setCurrent((c) => Math.max(1, c - 1))}
          size="sm"
          variant="outline"
        >
          Back
        </Button>
        <Button
          disabled={current === steps.length}
          onClick={() => setCurrent((c) => Math.min(steps.length, c + 1))}
          size="sm"
        >
          {current === steps.length - 1 ? "Place Order" : "Continue"}
        </Button>
      </div>
    </div>
  );
}

Admin Hierarchy

An organization → team → member breadcrumb where each level has a distinct colored icon badge (violet, blue, emerald) to indicate resource type.

import { Building2Icon, UserIcon, UsersIcon } from "lucide-react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Frame, FramePanel } from "@/components/ui/frame";

export function Pattern() {
  return (
    <Frame>
      <FramePanel>
        <Breadcrumb>
          <BreadcrumbList className="gap-2 sm:gap-2">
            <BreadcrumbItem>
              <BreadcrumbLink className="flex items-center gap-2" href="#">
                <span className="flex size-6 items-center justify-center rounded-md bg-violet-100 dark:bg-violet-950">
                  <Building2Icon className="size-3.5 text-violet-600 dark:text-violet-400" />
                </span>
                <span className="font-medium text-sm">Acme Corp</span>
              </BreadcrumbLink>
            </BreadcrumbItem>

            <BreadcrumbSeparator />

            <BreadcrumbItem>
              <BreadcrumbLink className="flex items-center gap-2" href="#">
                <span className="flex size-6 items-center justify-center rounded-md bg-blue-100 dark:bg-blue-950">
                  <UsersIcon className="size-3.5 text-blue-600 dark:text-blue-400" />
                </span>
                <span className="font-medium text-sm">Engineering</span>
              </BreadcrumbLink>
            </BreadcrumbItem>

            <BreadcrumbSeparator />

            <BreadcrumbItem>
              <BreadcrumbPage className="flex items-center gap-2">
                <span className="flex size-6 items-center justify-center rounded-md bg-emerald-100 dark:bg-emerald-950">
                  <UserIcon className="size-3.5 text-emerald-600 dark:text-emerald-400" />
                </span>
                <span className="font-medium text-sm">Alex Johnson</span>
              </BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </FramePanel>
    </Frame>
  );
}

Page Header

A breadcrumb integrated into a page header with right-aligned edit and share action buttons, separated from the nav path by a vertical divider.

Page content

import { PencilIcon, ShareIcon } from "lucide-react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { Frame, FramePanel } from "@/components/ui/frame";
import { Separator } from "@/components/ui/separator";

export function Pattern() {
  return (
    <div className="mx-auto w-full max-w-2xl">
      <Frame>
        <FramePanel className="flex items-center justify-between gap-4 px-4 py-2.5!">
          <Breadcrumb>
            <BreadcrumbList className="sm:gap-1.5">
              <BreadcrumbItem>
                <BreadcrumbLink
                  className="text-muted-foreground text-sm hover:text-foreground"
                  href="#"
                >
                  Docs
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbLink
                  className="text-muted-foreground text-sm hover:text-foreground"
                  href="#"
                >
                  Components
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage className="font-medium text-sm">
                  Breadcrumb
                </BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>

          <div className="flex shrink-0 items-center gap-1">
            <Button size="xs" variant="ghost">
              <ShareIcon className="size-3.5" />
              Share
            </Button>
            <Separator className="h-4" orientation="vertical" />
            <Button size="xs" variant="ghost">
              <PencilIcon className="size-3.5" />
              Edit
            </Button>
          </div>
        </FramePanel>

        <FramePanel className="flex h-32 items-center justify-center text-muted-foreground text-sm">
          Page content
        </FramePanel>
      </Frame>
    </div>
  );
}

Compact With Ellipsis

Collapses long paths into a BreadcrumbEllipsis trigger with a badge showing the count of hidden items in a dropdown menu.

import { HouseIcon } from "lucide-react";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuItem,
  MenuPopup,
  MenuTrigger,
} from "@/components/ui/menu";

const hidden = [
  { href: "#", label: "Dashboard" },
  { href: "#", label: "Settings" },
  { href: "#", label: "Integrations" },
];

export function Pattern() {
  return (
    <Breadcrumb>
      <BreadcrumbList className="sm:gap-1.5">
        <BreadcrumbItem>
          <BreadcrumbLink className="flex items-center gap-1" href="#">
            <HouseIcon className="size-4" />
            <span className="sr-only sm:not-sr-only">Home</span>
          </BreadcrumbLink>
        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>
          <Menu>
            <MenuTrigger
              render={
                <Button
                  className="-m-1.5 gap-1 text-muted-foreground"
                  size="icon-sm"
                  variant="ghost"
                />
              }
            >
              <BreadcrumbEllipsis />
              <Badge
                className="hidden sm:inline-flex"
                size="sm"
                variant="secondary"
              >
                {hidden.length}
              </Badge>
            </MenuTrigger>
            <MenuPopup align="start">
              {hidden.map((item) => (
                <MenuItem key={item.label} render={<Link href={item.href} />}>
                  {item.label}
                </MenuItem>
              ))}
            </MenuPopup>
          </Menu>
        </BreadcrumbItem>

        <BreadcrumbSeparator />

        <BreadcrumbItem>
          <BreadcrumbPage className="font-medium">Notifications</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

On This Page

Installation Usage Examples With custom separator With Dropdown Menu With Next.js Link With Icons With Avatar Inside Card With Home Icon Button-style With Project and User Info File Path Checkout Steps Admin Hierarchy Page Header Compact With Ellipsis