Breadcrumb

Show where a page sits in a hierarchy.

navigationwayfinding

Preview

Live · keyboard ready

When to use

Showing where a page sits in a hierarchy, such as Workspace, Settings, Billing.
Client-side paths like a file browser, where crumbs call onClick instead of navigating.
Paths that grow as people drill in, where new crumbs should slide in.

When not to use

Use tree-view when people need to browse the whole hierarchy.
Use tabs for switching between sibling views.
Use pagination for moving through pages of a list.

shadcn CLI

Also installs (1)

manicat-foundation

Manual install(+)

registry.jsonjson

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "type": "registry:ui",
  "title": "Breadcrumb",
  "description": "Show where a page sits in a hierarchy.",
  "categories": [
    "disclosure"
  ],
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json"
  ],
  "files": [
    {
      "path": "registry/components/breadcrumb/breadcrumb.tsx",
      "type": "registry:component",
      "target": "@components/manicat/breadcrumb/breadcrumb.tsx"
    },
    {
      "path": "registry/components/breadcrumb/breadcrumb.module.css",
      "type": "registry:component",
      "target": "@components/manicat/breadcrumb/breadcrumb.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/breadcrumb",
  "meta": {
    "tier": "free",
    "kind": "component",
    "docs": "https://manicat.viraza.net/components/breadcrumb",
    "markdown": "https://uiarc.dev/components/breadcrumb/markdown",
    "tags": [
      "navigation",
      "wayfinding"
    ]
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx

"use client";

import { Breadcrumb } from "@/components/manicat/breadcrumb/breadcrumb";

export function BreadcrumbExample() {
  return (
    <Breadcrumb
      items={[
        { label: "Settings", href: "#" },
        { label: "Billing", href: "#" },
        { label: "Teams" },
      ]}
    />
  );
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Settings trail Where you are in a nested settings area; the last item is the current page and isn't a link.

Live · keyboard ready

settings-trail-where-you-are-in-a-nested-settings-area-the-last-item-is-the-current-page-and-isn-t-a-link-.tsxtsx

"use client";

import { Breadcrumb } from "@/components/manicat/breadcrumb/breadcrumb";

export function BreadcrumbTrailExample() {
  return (
    <Breadcrumb
      items={[
        { label: "Settings", href: "/settings" },
        { label: "Billing", href: "/settings/billing" },
        { label: "Invoices" },
      ]}
    />
  );
}

Keyboard interactions

Keys	Action
Tab	Moves between crumb links and buttons.
Enter	Follows the focused crumb.

Accessibility

Renders a nav landmark with an ordered list.
The last item is a span with aria-current="page" and is never a link.
Chevron separators are aria-hidden.

Motion

Crumbs present on first render stay still; new crumbs slide in 8px from the left out of a blur while siblings shift on a smooth spring.
Reduced motion adds and removes crumbs without movement.

Responsive behavior

The list wraps onto new lines on narrow screens; individual crumbs never wrap internally.
It does not truncate or collapse long paths, so keep labels short or shorten the path on mobile yourself.

Performance

Crumbs use layout position animation only when the path changes; static paths do not animate.

Notes for AI

Use for hierarchical page location. For client-side paths such as a file browser, pass onClick without href.
Links are plain anchors by default. For client-side navigation, wrap the app once in ArcProvider from @/components/arc/lib/arc-provider with your router's Link: <ArcProvider link={Link}>.
Keep labels short; the component does not truncate or collapse long paths.