# Breadcrumb
URL: /design/components/breadcrumb

Where you are, as a path you can walk back up.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

\[interactive preview component BreadcrumbSpecimen omitted]

Code for BreadcrumbSpecimen preview:

```tsx
"use client";

import { useState, type ReactNode } from "react";
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

function BreadcrumbSpecimen(): ReactNode {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/design">Design</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/design">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}
```

## Installation

Install the dependencies:

- packages

  - @base-ui/react

Copy the source into `components/ui/breadcrumb.tsx`. Registry items that depend on it install it automatically.

- code

  import \* as React from "react"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"; import { cn } from "@/lib/utils"; function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) { return ( \<nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} /> ); } function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) { return ( \<ol data-slot="breadcrumb-list" className={cn( "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className, )} {...props} /> ); } function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) { return ( \<li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5", className)} {...props} /> ); } function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">) { return useRender({ defaultTagName: "a", props: mergeProps<"a">( { className: cn("hover:text-foreground transition-colors", className), }, props, ), render, state: { slot: "breadcrumb-link", }, }); } function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) { return ( \<span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" className={cn("text-foreground font-normal", className)} {...props} /> ); } function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) { return ( \<li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" className={cn("\[&>svg]:size-3.5", className)} {...props} > {children ?? \<ChevronRightIcon className="rtl:rotate-180" />} \</li> ); } function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) { return ( \<span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" className={cn("flex size-9 items-center justify-center", className)} {...props} > \<MoreHorizontalIcon className="size-4" /> \<span className="sr-only">More\</span> \</span> ); } export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

* title

  components/ui/breadcrumb.tsx

* copyText

  import \* as React from "react"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"; import { cn } from "@/lib/utils"; function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) { return ( \<nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} /> ); } function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) { return ( \<ol data-slot="breadcrumb-list" className={cn( "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className, )} {...props} /> ); } function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) { return ( \<li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5", className)} {...props} /> ); } function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">) { return useRender({ defaultTagName: "a", props: mergeProps<"a">( { className: cn("hover:text-foreground transition-colors", className), }, props, ), render, state: { slot: "breadcrumb-link", }, }); } function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) { return ( \<span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" className={cn("text-foreground font-normal", className)} {...props} /> ); } function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) { return ( \<li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" className={cn("\[&>svg]:size-3.5", className)} {...props} > {children ?? \<ChevronRightIcon className="rtl:rotate-180" />} \</li> ); } function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) { return ( \<span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" className={cn("flex size-9 items-center justify-center", className)} {...props} > \<MoreHorizontalIcon className="size-4" /> \<span className="sr-only">More\</span> \</span> ); } export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

* viewportClassName

  max-h-\[450px]

- language

  tsx

- code

  import \* as React from "react"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"; import { cn } from "@/lib/utils"; function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) { return ( \<nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} /> ); } function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) { return ( \<ol data-slot="breadcrumb-list" className={cn( "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className, )} {...props} /> ); } function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) { return ( \<li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5", className)} {...props} /> ); } function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">) { return useRender({ defaultTagName: "a", props: mergeProps<"a">( { className: cn("hover:text-foreground transition-colors", className), }, props, ), render, state: { slot: "breadcrumb-link", }, }); } function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) { return ( \<span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" className={cn("text-foreground font-normal", className)} {...props} /> ); } function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) { return ( \<li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" className={cn("\[&>svg]:size-3.5", className)} {...props} > {children ?? \<ChevronRightIcon className="rtl:rotate-180" />} \</li> ); } function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) { return ( \<span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" className={cn("flex size-9 items-center justify-center", className)} {...props} > \<MoreHorizontalIcon className="size-4" /> \<span className="sr-only">More\</span> \</span> ); } export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

## Usage

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

export function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/design">Design</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}
```

## Examples

### Collapsed

`BreadcrumbEllipsis` stands in for levels that do not need to be spelled out.

\[interactive preview component BreadcrumbEllipsisSpecimen omitted]

Code for BreadcrumbEllipsisSpecimen preview:

```tsx
"use client";

import { useState, type ReactNode } from "react";
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

function BreadcrumbEllipsisSpecimen(): ReactNode {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/design">Design</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/design/components/breadcrumb">
            Components
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}
```

## API Reference

### Parts

| Part                  | Description                                                |
| --------------------- | ---------------------------------------------------------- |
| `Breadcrumb`          | The `nav` landmark.                                        |
| `BreadcrumbList`      | The ordered list of levels.                                |
| `BreadcrumbItem`      | One level.                                                 |
| `BreadcrumbLink`      | A navigable level; compose with `render` for router links. |
| `BreadcrumbPage`      | The current page, not a link.                              |
| `BreadcrumbSeparator` | The divider glyph between levels.                          |
| `BreadcrumbEllipsis`  | Placeholder for collapsed levels.                          |