---
title: "Breadcrumb"
description: "A hierarchy of links to navigate through a website."
canonical_url: "https://vinicunca.dev/pohon/components/breadcrumb"
---
# Breadcrumb

> A hierarchy of links to navigate through a website.

## Usage

Use the Breadcrumb component to show the current page's location in your site's hierarchy.

```vue
<script setup lang="ts">
import type { BreadcrumbItem } from 'pohon-ui'

const items = ref<BreadcrumbItem[]>([
  {
    label: "Docs",
    icon: "i-lucide-book-open",
    to: "/pohon/getting-started"
  },
  {
    label: "Components",
    icon: "i-lucide-box",
    to: "/pohon/components"
  },
  {
    label: "Breadcrumb",
    icon: "i-lucide-link",
    to: "/pohon/components/breadcrumb"
  }
])
</script>

<template>
  <PBreadcrumb :items="items" />
</template>
```

### Items

Use the `items` prop as an array of objects with the following properties:

- `label?: string`
- `icon?: string`
- `avatar?: AvatarProps`
- [`slot?: string`](#with-custom-slot)
- `class?: any`
- `ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLabel?: ClassNameValue, separator?: ClassNameValue, separatorIcon?: ClassNameValue }`

You can pass any property from the [Link](https://vinicunca.dev/pohon/components/link#props) component such as `to`, `target`, etc.

```vue
<script setup lang="ts">
import type { BreadcrumbItem } from 'pohon-ui'

const items = ref<BreadcrumbItem[]>([
  {
    label: "Docs",
    icon: "i-lucide-book-open",
    to: "/pohon/getting-started"
  },
  {
    label: "Components",
    icon: "i-lucide-box",
    to: "/pohon/components"
  },
  {
    label: "Breadcrumb",
    icon: "i-lucide-link",
    to: "/pohon/components/breadcrumb"
  }
])
</script>

<template>
  <PBreadcrumb :items="items" />
</template>
```

> [!NOTE]
> 
> A `span` is rendered instead of a link when the `to` property is not defined.

### Separator Icon

Use the `separator-icon` prop to customize the [Icon](https://vinicunca.dev/pohon/components/icon) between each item. Defaults to `i-lucide-chevron-right`.

```vue
<script setup lang="ts">
import type { BreadcrumbItem } from 'pohon-ui'

const items = ref<BreadcrumbItem[]>([
  {
    label: "Docs",
    icon: "i-lucide-book-open",
    to: "/pohon/getting-started"
  },
  {
    label: "Components",
    icon: "i-lucide-box",
    to: "/pohon/components"
  },
  {
    label: "Breadcrumb",
    icon: "i-lucide-link",
    to: "/pohon/components/breadcrumb"
  }
])
</script>

<template>
  <PBreadcrumb separator-icon="i-lucide-arrow-right" :items="items" />
</template>
```

**Nuxt:**

> [!TIP]
> See: /pohon/getting-started/integrations/icons/nuxt#theme
> 
> You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronRight` key.

**Vue:**

> [!TIP]
> See: /pohon/getting-started/integrations/icons/vue#theme
> 
> You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronRight` key.

### Color

Use the `color` prop to change the color of the active Breadcrumb.

```vue
<script setup lang="ts">
import type { BreadcrumbItem } from 'pohon-ui'

const items = ref<BreadcrumbItem[]>([
  {
    label: "Docs",
    icon: "i-lucide-book-open",
    to: "/pohon/getting-started"
  },
  {
    label: "Components",
    icon: "i-lucide-box",
    to: "/pohon/components"
  },
  {
    label: "Breadcrumb",
    icon: "i-lucide-link",
    to: "/pohon/components/breadcrumb"
  }
])
</script>

<template>
  <PBreadcrumb color="secondary" :items="items" />
</template>
```

## Examples

### With separator slot

Use the `#separator` slot to customize the separator between each item.

```vue [BreadcrumbSeparatorSlotExample.vue]
<script setup lang="ts">
import type { BreadcrumbItem } from 'pohon-ui';

const items: Array<BreadcrumbItem> = [
  {
    label: 'Docs',
    to: '/pohon/getting-started',
  },
  {
    label: 'Components',
    to: '/pohon/components',
  },
  {
    label: 'Breadcrumb',
    to: '/pohon/components/breadcrumb',
  },
];
</script>

<template>
  <PBreadcrumb :items="items">
    <template #separator>
      <span class="color-text-muted mx-2">/</span>
    </template>
  </PBreadcrumb>
</template>
```

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`
- `#{{ item.slot }}-leading`
- `#{{ item.slot }}-label`
- `#{{ item.slot }}-trailing`

```vue [BreadcrumbCustomSlotExample.vue]
<script setup lang="ts">
import type { BreadcrumbItem } from 'pohon-ui';

const items = [
  {
    label: 'Home',
    to: '/',
  },
  {
    slot: 'dropdown' as const,
    icon: 'i-lucide-ellipsis',
    children: [
      {
        label: 'Documentation',
        to: '/pohon/getting-started',
      },
      {
        label: 'Themes',
      },
      {
        label: 'GitHub',
      },
    ],
  },
  {
    label: 'Components',
    to: '/pohon/components',
  },
  {
    label: 'Breadcrumb',
    to: '/pohon/components/breadcrumb',
  },
] satisfies Array<BreadcrumbItem>;
</script>

<template>
  <PBreadcrumb :items="items">
    <template #dropdown="{ item }">
      <PDropdownMenu :items="item.children">
        <PButton
          :icon="item.icon"
          color="neutral"
          variant="link"
          class="p-0.5"
        />
      </PDropdownMenu>
    </template>
  </PBreadcrumb>
</template>
```

> [!TIP]
> See: #slots
> 
> You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.

## API

### Props

```ts
/**
 * Props for the Breadcrumb component
 */
interface BreadcrumbProps {
}
```

### Slots

```ts
/**
 * Slots for the Breadcrumb component
 */
interface BreadcrumbSlots {
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    breadcrumb: {
      slots: {
        root: 'relative min-w-0',
        list: 'flex items-center gap-1.5',
        item: 'flex min-w-0',
        link: 'group relative flex items-center gap-1.5 text-sm min-w-0 rounded-md',
        linkLeadingIcon: 'shrink-0 size-5',
        linkLeadingAvatar: 'shrink-0',
        linkLeadingAvatarSize: '2xs',
        linkLabel: 'truncate',
        separator: 'flex',
        separatorIcon: 'shrink-0 size-5 color-text-muted'
      },
      variants: {
        active: {
          true: {
            link: 'font-600'
          },
          false: {
            link: 'color-text-muted font-500'
          }
        },
        disabled: {
          true: {
            link: 'cursor-not-allowed opacity-75'
          }
        },
        to: {
          true: ''
        },
        color: {
          primary: {
            link: 'outline-primary/25 focus-visible:outline-3'
          },
          secondary: {
            link: 'outline-secondary/25 focus-visible:outline-3'
          },
          success: {
            link: 'outline-success/25 focus-visible:outline-3'
          },
          info: {
            link: 'outline-info/25 focus-visible:outline-3'
          },
          warning: {
            link: 'outline-warning/25 focus-visible:outline-3'
          },
          error: {
            link: 'outline-error/25 focus-visible:outline-3'
          },
          neutral: {
            link: 'outline-border-inverted/25 focus-visible:outline-3'
          }
        }
      },
      compoundVariants: [
        {
          disabled: false,
          active: false,
          to: true,
          class: {
            link: [
              'hover:color-text',
              'transition-colors'
            ]
          }
        },
        {
          color: 'primary',
          active: true,
          class: {
            link: 'color-primary'
          }
        },
        {
          color: 'secondary',
          active: true,
          class: {
            link: 'color-secondary'
          }
        },
        {
          color: 'success',
          active: true,
          class: {
            link: 'color-success'
          }
        },
        {
          color: 'info',
          active: true,
          class: {
            link: 'color-info'
          }
        },
        {
          color: 'warning',
          active: true,
          class: {
            link: 'color-warning'
          }
        },
        {
          color: 'error',
          active: true,
          class: {
            link: 'color-error'
          }
        },
        {
          color: 'neutral',
          active: true,
          class: {
            link: 'color-text-highlighted'
          }
        }
      ],
      defaultVariants: {
        color: 'primary'
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/vinicunca/pohon/commits/main/src/runtime/components/Breadcrumb.vue) and [theme](https://github.com/vinicunca/pohon/commits/main/src/theme/breadcrumb.ts).

---

- [GitHub](https://github.com/vinicunca/pohon/blob/main/src/runtime/components/Breadcrumb.vue)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.