---
title: Breadcrumb
description: The title of a detail page, with the way back.
---

```tsx
import { Breadcrumb } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function BreadcrumbBasic() {
  return (
    <Preview>
      <Breadcrumb.Root>
        <Breadcrumb.Item href="#">Item 1</Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Current>Item 2</Breadcrumb.Current>
      </Breadcrumb.Root>
    </Preview>
  );
}
```

- The current item is the page's only `h1`. List pages have no breadcrumb and no title.
- `Breadcrumb.Item` is a link; pass `render` for a router link.
- `Breadcrumb.Text` is a step with no page of its own, such as a section that only groups other pages. It looks like an item but is not a link.
- Put `Breadcrumb.Separator` between items. It is hidden from assistive technology.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `render?` | `ReactElement \| function` | - | On Item. Renders another element, such as a router link. |

Parts: `Root`, `Current`, `Item`, `Text`, `Separator`. Other props go to the native element: `nav` for `Root`, `h1` for `Current`, `a` for `Item`, `span` for `Text`.