---
title: Breadcrumb
description: "`Breadcrumb` is a component that helps users understand the hierarchy of a website."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/breadcrumb/breadcrumb.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/breadcrumb
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-breadcrumb--basic
---

```tsx
<Breadcrumb.Root>
  <Breadcrumb.Link href="/">サイヤ人編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">ナメック星編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>
```

## Usage

```tsx
import { Breadcrumb } from "@yamada-ui/react"
```

```tsx
import { Breadcrumb } from "@/components/ui"
```

```tsx
import { Breadcrumb } from "@workspaces/ui"
```

```tsx
<Breadcrumb.Root>
  <Breadcrumb.Link />
  <Breadcrumb.Ellipsis />
</Breadcrumb.Root>
```

### Use items

```tsx
const items = useMemo<Breadcrumb.Item[]>(
  () => [
    {
      href: "/",
      label: "サイヤ人編",
    },
    {
      href: "/",
      label: "ナメック星編",
    },
    {
      href: "/",
      label: "人造人間編",
    },
    {
      href: "/",
      currentPage: true,
      label: "魔人ブウ編",
    },
  ],
  [],
)

return <Breadcrumb.Root items={items} />
```

### Change variant

```tsx
<VStack>
  <For each={["plain", "underline"]}>
    {(variant, index) => (
      <Breadcrumb.Root variant={variant} key={index}>
        <Breadcrumb.Link href="/">サイヤ人編</Breadcrumb.Link>
        <Breadcrumb.Link href="/">ナメック星編</Breadcrumb.Link>
        <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
        <Breadcrumb.Link href="/" currentPage>
          魔人ブウ編
        </Breadcrumb.Link>
      </Breadcrumb.Root>
    )}
  </For>
</VStack>
```

### Customize the Separator

To customize the separator, set a separator character to `separator`.

```tsx
<Breadcrumb.Root separator="/">
  <Breadcrumb.Link href="/">サイヤ人編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">ナメック星編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>
```

To use an icon as a separator, set a `ReactNode` to `separator`.

```tsx
<Breadcrumb.Root separator={<ChevronsRightIcon />}>
  <Breadcrumb.Link href="/">サイヤ人編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">ナメック星編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>
```

### Use Ellipsis

To use ellipsis, set `Breadcrumb.Ellipsis` at the position where you want to use ellipsis.

```tsx
<Breadcrumb.Root>
  <Breadcrumb.Link href="/">孫悟空少年編</Breadcrumb.Link>
  <Breadcrumb.Ellipsis />
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>
```

Alternatively, you can use ellipsis by setting numerical values to `startBoundaries` and `endBoundaries`.

```tsx
const items = useMemo<Breadcrumb.Item[]>(
  () => [
    {
      href: "/",
      label: "サイヤ人編",
    },
    {
      href: "/",
      label: "ナメック星編",
    },
    {
      href: "/",
      label: "人造人間編",
    },
    {
      href: "/",
      currentPage: true,
      label: "魔人ブウ編",
    },
  ],
  [],
)

return <Breadcrumb.Root items={items} endBoundaries={1} startBoundaries={1} />
```

### Display Ellipsis Items in a Menu

```tsx
<Breadcrumb.Root>
  <Breadcrumb.Link href="/">孫悟空少年編</Breadcrumb.Link>
  <Menu.Root>
    <Menu.Trigger>
      <Breadcrumb.Ellipsis cursor="pointer" />
    </Menu.Trigger>

    <Menu.Content>
      <Menu.Item as="a" href="/">
        ピッコロ大魔王編
      </Menu.Item>
      <Menu.Item as="a" href="/">
        サイヤ人編
      </Menu.Item>
      <Menu.Item as="a" href="/">
        フリーザ編
      </Menu.Item>
    </Menu.Content>
  </Menu.Root>
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>
```

### Customize the Ellipsis

```tsx
const items = useMemo<Breadcrumb.Item[]>(
  () => [
    {
      href: "/",
      label: "サイヤ人編",
    },
    {
      href: "/",
      label: "ナメック星編",
    },
    {
      href: "/",
      label: "人造人間編",
    },
    {
      href: "/",
      currentPage: true,
      label: "魔人ブウ編",
    },
  ],
  [],
)

return (
  <Breadcrumb.Root
    ellipsis={({ items }) => {
      return (
        <Menu.Root>
          <Menu.Trigger>
            <Breadcrumb.Ellipsis
              cursor="pointer"
              focusVisibleRing="outline"
              outline="none"
              rounded="l1"
            />
          </Menu.Trigger>

          <Menu.Content>
            {items.map(({ href, label }, index) => (
              <Menu.Item key={index} as="a" href={href}>
                {label}
              </Menu.Item>
            ))}
          </Menu.Content>
        </Menu.Root>
      )
    }}
    endBoundaries={1}
    items={items}
    startBoundaries={1}
  />
)
```

## Props

### Breadcrumb.Root

| Prop              | Default   | Type                                                                                                                                                                                             | Description                                            |
| ----------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
| `as`              | -         | `As`                                                                                                                                                                                             | The HTML element to render.                            |
| `asChild`         | -         | `boolean`                                                                                                                                                                                        | Merges its props onto its immediate child.             |
| `css`             | -         | `CSSObject \| CSSObject[]`                                                                                                                                                                       | The CSS object.                                        |
| `colorScheme`     | -         | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                                        | Set color scheme variables.                            |
| `size`            | `"md"`    | `"lg" \| "md" \| "sm"`                                                                                                                                                                           | The size of the component.                             |
| `variant`         | `"plain"` | `"plain" \| "underline"`                                                                                                                                                                         | The variant of the component.                          |
| `ellipsis`        | -         | `string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| ((props: { ...; }) => ReactNode)` | The icon to be used in the ellipsis.                   |
| `endBoundaries`   | `0`       | `number`                                                                                                                                                                                         | Number of elements visible on the end(right) edges.    |
| `itemProps`       | -         | `BreadcrumbItemProps`                                                                                                                                                                            | Props for item element.                                |
| `items`           | -         | `BreadcrumbItem[]`                                                                                                                                                                               | If provided, generate breadcrumb items based on items. |
| `link`            | -         | `ReactElement<any, string \| JSXElementConstructor<any>>`                                                                                                                                        | The component to be used for the link.                 |
| `listProps`       | -         | `HTMLStyledProps<"ol">`                                                                                                                                                                          | Props for ol element.                                  |
| `separator`       | `"/"`     | `ReactElement \| string`                                                                                                                                                                         | The visual separator between each breadcrumb item.     |
| `separatorProps`  | -         | `BreadcrumbSeparatorProps`                                                                                                                                                                       | Props for separator element.                           |
| `startBoundaries` | `0`       | `number`                                                                                                                                                                                         | Number of elements visible on the start(left) edges.   |

### Breadcrumb.Ellipsis

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Breadcrumb.Link

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `currentPage` | `false` | `boolean`                                                                                                                 | If `true`, change to span element.         |

## Accessibility

Currently, this section is being updated due to the migration of v2.