Breadcrumb

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

1
/** biome-ignore-all lint/a11y/useValidAnchor: demo */
2

3
import {
4
  Breadcrumb,
5
  BreadcrumbEllipsis,
6
  BreadcrumbItem,
7
  BreadcrumbLink,
8
  BreadcrumbList,
9
  BreadcrumbPage,
10
  BreadcrumbSeparator,
11
} from "@/components/ui/pxl/breadcrumb";
12
import { Button } from "@/components/ui/pxl/button";
13
import {
14
  DropdownMenu,
15
  DropdownMenuContent,
16
  DropdownMenuGroup,
17
  DropdownMenuItem,
18
  DropdownMenuTrigger,
19
} from "@/components/ui/pxl/dropdown-menu";
20

21
export default function BreadcrumbDemo() {
22
  return (
23
    <Breadcrumb>
24
      <BreadcrumbList>
25
        <BreadcrumbItem>
26
          <BreadcrumbLink render={<a href="#">Home</a>} />
27
        </BreadcrumbItem>
28
        <BreadcrumbSeparator />
29
        <BreadcrumbItem>
30
          <DropdownMenu>
31
            <DropdownMenuTrigger
32
              render={
33
                <Button size="icon-sm" variant="ghost">
34
                  <BreadcrumbEllipsis />
35
                  <span className="sr-only">Toggle menu</span>
36
                </Button>
37
              }
38
            />
39
            <DropdownMenuContent align="start">
40
              <DropdownMenuGroup>
41
                <DropdownMenuItem>Documentation</DropdownMenuItem>
42
                <DropdownMenuItem>Themes</DropdownMenuItem>
43
                <DropdownMenuItem>GitHub</DropdownMenuItem>
44
              </DropdownMenuGroup>
45
            </DropdownMenuContent>
46
          </DropdownMenu>
47
        </BreadcrumbItem>
48
        <BreadcrumbSeparator />
49
        <BreadcrumbItem>
50
          <BreadcrumbLink render={<a href="#">Components</a>} />
51
        </BreadcrumbItem>
52
        <BreadcrumbSeparator />
53
        <BreadcrumbItem>
54
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
55
        </BreadcrumbItem>
56
      </BreadcrumbList>
57
    </Breadcrumb>
58
  );
59
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/breadcrumb

Install the following dependencies:

pnpm add @base-ui/react

Copy and paste the following code into your project.

1
import { mergeProps } from "@base-ui/react/merge-props";
2
import { useRender } from "@base-ui/react/use-render";
3
import type { ComponentProps } from "react";
4

5
import { cn } from "@/lib/utils";
6

7
function Breadcrumb({ className, ...props }: ComponentProps<"nav">) {
8
  return (
9
    <nav
10
      aria-label="breadcrumb"
11
      data-slot="breadcrumb"
12
      className={cn(className)}
13
      {...props}
14
    />
15
  );
16
}
17

18
function BreadcrumbList({ className, ...props }: ComponentProps<"ol">) {
19
  return (
20
    <ol
21
      data-slot="breadcrumb-list"
22
      className={cn(
23
        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
24
        className,
25
      )}
26
      {...props}
27
    />
28
  );
29
}
30

31
function BreadcrumbItem({ className, ...props }: ComponentProps<"li">) {
32
  return (
33
    <li
34
      data-slot="breadcrumb-item"
35
      className={cn("inline-flex items-center gap-1", className)}
36
      {...props}
37
    />
38
  );
39
}
40

41
function BreadcrumbLink({
42
  className,
43
  render,
44
  ...props
45
}: useRender.ComponentProps<"a">) {
46
  return useRender({
47
    defaultTagName: "a",
48
    props: mergeProps<"a">(
49
      {
50
        className: cn("transition-colors hover:text-foreground", className),
51
      },
52
      props,
53
    ),
54
    render,
55
    state: {
56
      slot: "breadcrumb-link",
57
    },
58
  });
59
}
60

61
function BreadcrumbPage({ className, ...props }: ComponentProps<"span">) {
62
  return (
63
    // biome-ignore lint/a11y/useFocusableInteractive: breadcrumb
64
    // biome-ignore lint/a11y/useSemanticElements: breadcrumb
65
    <span
66
      data-slot="breadcrumb-page"
67
      role="link"
68
      aria-disabled="true"
69
      aria-current="page"
70
      className={cn("font-normal text-foreground", className)}
71
      {...props}
72
    />
73
  );
74
}
75

76
function BreadcrumbSeparator({
77
  children,
78
  className,
79
  ...props
80
}: React.ComponentProps<"li">) {
81
  return (
82
    <li
83
      data-slot="breadcrumb-separator"
84
      role="presentation"
85
      aria-hidden="true"
86
      className={cn("[&>svg]:size-3.5", className)}
87
      {...props}
88
    >
89
      {children ?? (
90
        <svg
91
          xmlns="http://www.w3.org/2000/svg"
92
          fill="currentColor"
93
          viewBox="0 0 24 24"
94
          className="cn-rtl-flip"
95
        >
96
          <path d="M16 13v-2h-2v2h2Zm-2-2V9h-2v2h2Zm0 4v-2h-2v2h2Zm-2-6V7h-2v2h2Zm0 8v-2h-2v2h2ZM10 7V5H8v2h2Zm0 12v-2H8v2h2Z" />
97
        </svg>
98
      )}
99
    </li>
100
  );
101
}
102

103
function BreadcrumbEllipsis({
104
  className,
105
  ...props
106
}: React.ComponentProps<"span">) {
107
  return (
108
    <span
109
      data-slot="breadcrumb-ellipsis"
110
      role="presentation"
111
      aria-hidden="true"
112
      className={cn(
113
        "flex size-5 items-center justify-center [&>svg]:size-4",
114
        className,
115
      )}
116
      {...props}
117
    >
118
      <svg
119
        xmlns="http://www.w3.org/2000/svg"
120
        fill="currentColor"
121
        viewBox="0 0 24 24"
122
      >
123
        <path d="M5 15H3v-2h2v2Zm8 0h-2v-2h2v2Zm8 0h-2v-2h2v2ZM3 13H1v-2h2v2Zm4 0H5v-2h2v2Zm4 0H9v-2h2v2Zm4 0h-2v-2h2v2Zm4 0h-2v-2h2v2Zm4 0h-2v-2h2v2ZM5 11H3V9h2v2Zm8 0h-2V9h2v2Zm8 0h-2V9h2v2Z" />
124
      </svg>
125
      <span className="sr-only">More</span>
126
    </span>
127
  );
128
}
129

130
export {
131
  Breadcrumb,
132
  BreadcrumbEllipsis,
133
  BreadcrumbItem,
134
  BreadcrumbLink,
135
  BreadcrumbList,
136
  BreadcrumbPage,
137
  BreadcrumbSeparator,
138
};

Update the import paths to match your project setup.

Usage

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink render={<a href="/" />}>Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink render={<a href="/components" />}>
        Components
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Composition

Use the following composition to build a Breadcrumb:

Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    └── BreadcrumbItem
        └── BreadcrumbPage

Custom separator

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

You can compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.

Collapsed

We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.

Link component

To use a custom link component from your routing library, you can use the render prop on <BreadcrumbLink />.

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

API Reference

The Breadcrumb component is the root navigation element that wraps all breadcrumb components.

Prop	Type	Default
`className`	`string`	-

BreadcrumbList

The BreadcrumbList component displays the ordered list of breadcrumb items.

Prop	Type	Default
`className`	`string`	-

BreadcrumbItem

The BreadcrumbItem component wraps individual breadcrumb items.

Prop	Type	Default
`className`	`string`	-

BreadcrumbLink

The BreadcrumbLink component displays a clickable link in the breadcrumb.

Prop	Type	Default
`className`	`string`	-

BreadcrumbPage

The BreadcrumbPage component displays the current page in the breadcrumb (non-clickable).

Prop	Type	Default
`className`	`string`	-

BreadcrumbSeparator

The BreadcrumbSeparator component displays a separator between breadcrumb items. You can pass custom children to override the default separator icon.

Prop	Type	Default
`children`	`React.ReactNode`	-
`className`	`string`	-

BreadcrumbEllipsis

The BreadcrumbEllipsis component displays an ellipsis indicator for collapsed breadcrumb items.

Prop	Type	Default
`className`	`string`	-