---
name: breadcrumb
title: Breadcrumb
url: https://ui.frontic.com/components/ui/breadcrumb.md
tier: ui
install: npx @frontic/ui add breadcrumb
files:
  - components/ui/breadcrumb/Breadcrumb.vue
  - components/ui/breadcrumb/BreadcrumbEllipsis.vue
  - components/ui/breadcrumb/BreadcrumbItem.vue
  - components/ui/breadcrumb/BreadcrumbLink.vue
  - components/ui/breadcrumb/BreadcrumbList.vue
  - components/ui/breadcrumb/BreadcrumbPage.vue
  - components/ui/breadcrumb/BreadcrumbSeparator.vue
  - components/ui/breadcrumb/index.ts
dependencies:
  - "@lucide/vue"
  - reka-ui
---

# Breadcrumb

Shows where the current page sits, such as Home / Jackets / Rain jackets, with links up the trail and an ellipsis for steps it hides.

## Install

```sh
npx @frontic/ui add breadcrumb
```

Used by: [Category Grid](https://ui.frontic.com/components/templates/category-grid.md)

npm packages: `@lucide/vue`, `reka-ui`

## Examples

```vue
<script setup lang="ts">
import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbEllipsis />
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Jackets</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Frost Escape Parka</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</template>
```

## Anatomy

```vue
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink />
      <BreadcrumbEllipsis />
      <BreadcrumbPage />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
  </BreadcrumbList>
</Breadcrumb>
```

## API reference

### Breadcrumb

Groups all parts of the breadcrumb, which shows where the current page sits. Renders a `<nav>`.

`data-slot="breadcrumb"` · `Breadcrumb.vue`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | `false` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
| `as` | `AsTag \| Component`: `ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string` | `'nav'` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `class` | `ClassValue` |  | Classes added to the part's own element, after its recipe classes. |
| `label` | `string` | `'Breadcrumb'` | Accessible name of the breadcrumb navigation, read out by screen readers. |

### BreadcrumbEllipsis

Stands in for breadcrumb steps that are hidden to save space. Renders a `<span>`.

`data-slot="breadcrumb-ellipsis"` · `BreadcrumbEllipsis.vue`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `ClassValue` |  | Classes added to the part's own element, after its recipe classes. |
| `label` | `string` | `'More'` | Screen-reader text for the hidden steps. |

### BreadcrumbItem

Groups one step of the breadcrumb trail. Renders a `<li>`.

`data-slot="breadcrumb-item"` · `BreadcrumbItem.vue`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | `false` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
| `as` | `AsTag \| Component`: `ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string` | `'li'` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `class` | `ClassValue` |  | Classes added to the part's own element, after its recipe classes. |

### BreadcrumbLink

Links to a higher level of the breadcrumb trail. Renders a `<a>`.

`data-slot="breadcrumb-link"` · `BreadcrumbLink.vue`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | `false` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
| `as` | `AsTag \| Component`: `ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string` | `'a'` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `class` | `ClassValue` |  | Classes added to the part's own element, after its recipe classes. |

### BreadcrumbList

Lists the steps of the breadcrumb in order. Renders a `<ol>`.

`data-slot="breadcrumb-list"` · `BreadcrumbList.vue`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | `false` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
| `as` | `AsTag \| Component`: `ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string` | `'ol'` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `class` | `ClassValue` |  | Classes added to the part's own element, after its recipe classes. |

### BreadcrumbPage

Marks the current page as the last step of the breadcrumb. Renders a `<span>`.

`data-slot="breadcrumb-page"` · `BreadcrumbPage.vue`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | `false` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
| `as` | `AsTag \| Component`: `ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string` | `'span'` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `class` | `ClassValue` |  | Classes added to the part's own element, after its recipe classes. |

### BreadcrumbSeparator

Separates two steps of the breadcrumb. Renders a `<li>`.

`data-slot="breadcrumb-separator"` · `BreadcrumbSeparator.vue`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `ClassValue` |  | Classes added to the part's own element, after its recipe classes. |

## Styling

| Part | Recipe |
| --- | --- |
| `list` | [`breadcrumb-list`](https://ui.frontic.com/DESIGN.md#breadcrumb-list) |
| `item` | [`breadcrumb-item`](https://ui.frontic.com/DESIGN.md#breadcrumb-item) |
| `link` | [`breadcrumb-link`](https://ui.frontic.com/DESIGN.md#breadcrumb-link) |
| `page` | [`breadcrumb-page`](https://ui.frontic.com/DESIGN.md#breadcrumb-page) |
| `separator` | [`breadcrumb-separator`](https://ui.frontic.com/DESIGN.md#breadcrumb-separator) |
| `ellipsis` | [`breadcrumb-ellipsis`](https://ui.frontic.com/DESIGN.md#breadcrumb-ellipsis) |

States with a look of their own: hover.

## Source

`components/ui/breadcrumb/Breadcrumb.vue`

```vue
<script lang="ts">
/** Groups all parts of the breadcrumb, which shows where the current page sits. */
export default {}
</script>

<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import { Primitive } from 'reka-ui'
import type { HTMLAttributes } from 'vue'

const props = withDefaults(
  defineProps<
    PrimitiveProps & {
      class?: HTMLAttributes['class']
      /** Accessible name of the breadcrumb navigation, read out by screen readers. */
      label?: string
    }
  >(),
  { as: 'nav', label: 'Breadcrumb' },
)
</script>

<template>
  <Primitive :as="props.as" :as-child="props.asChild" :aria-label="props.label" data-slot="breadcrumb" :class="props.class">
    <slot />
  </Primitive>
</template>
```

`components/ui/breadcrumb/BreadcrumbEllipsis.vue`

```vue
<script lang="ts">
/** Stands in for breadcrumb steps that are hidden to save space. */
export default {}
</script>

<script setup lang="ts">
import { MoreHorizontalIcon } from '@lucide/vue'

import type { HTMLAttributes } from 'vue'

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    /** Screen-reader text for the hidden steps. */
    label?: string
  }>(),
  { label: 'More' },
)
</script>

<template>
  <span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" :class="['fui-breadcrumb-ellipsis', props.class]">
    <slot>
      <MoreHorizontalIcon data-icon />
    </slot>
    <span class="sr-only">{{ props.label }}</span>
  </span>
</template>
```

`components/ui/breadcrumb/BreadcrumbItem.vue`

```vue
<script lang="ts">
/** Groups one step of the breadcrumb trail. */
export default {}
</script>

<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import { Primitive } from 'reka-ui'
import type { HTMLAttributes } from 'vue'

const props = withDefaults(
  defineProps<
    PrimitiveProps & {
      class?: HTMLAttributes['class']
    }
  >(),
  { as: 'li' },
)
</script>

<template>
  <Primitive :as="props.as" :as-child="props.asChild" data-slot="breadcrumb-item" :class="['fui-breadcrumb-item', props.class]">
    <slot />
  </Primitive>
</template>
```

`components/ui/breadcrumb/BreadcrumbLink.vue`

```vue
<script lang="ts">
/** Links to a higher level of the breadcrumb trail. */
export default {}
</script>

<script lang="ts" setup>
import type { PrimitiveProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { Primitive } from 'reka-ui'

const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
  as: 'a',
})
</script>

<template>
  <Primitive data-slot="breadcrumb-link" :as="props.as" :as-child="props.asChild" :class="['fui-breadcrumb-link transition-colors', props.class]">
    <slot />
  </Primitive>
</template>
```

`components/ui/breadcrumb/BreadcrumbList.vue`

```vue
<script lang="ts">
/** Lists the steps of the breadcrumb in order. */
export default {}
</script>

<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import { Primitive } from 'reka-ui'
import type { HTMLAttributes } from 'vue'

const props = withDefaults(
  defineProps<
    PrimitiveProps & {
      class?: HTMLAttributes['class']
    }
  >(),
  { as: 'ol' },
)
</script>

<template>
  <Primitive :as="props.as" :as-child="props.asChild" data-slot="breadcrumb-list" :class="['fui-breadcrumb-list wrap-break-word', props.class]">
    <slot />
  </Primitive>
</template>
```

`components/ui/breadcrumb/BreadcrumbPage.vue`

```vue
<script lang="ts">
/** Marks the current page as the last step of the breadcrumb. */
export default {}
</script>

<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import { Primitive } from 'reka-ui'
import type { HTMLAttributes } from 'vue'

const props = withDefaults(
  defineProps<
    PrimitiveProps & {
      class?: HTMLAttributes['class']
    }
  >(),
  { as: 'span' },
)
</script>

<template>
  <Primitive :as="props.as" :as-child="props.asChild" data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" :class="['fui-breadcrumb-page', props.class]">
    <slot />
  </Primitive>
</template>
```

`components/ui/breadcrumb/BreadcrumbSeparator.vue`

```vue
<script lang="ts">
/** Separates two steps of the breadcrumb. */
export default {}
</script>

<script setup lang="ts">
import { ChevronRightIcon } from '@lucide/vue'

import type { HTMLAttributes } from 'vue'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" :class="['fui-breadcrumb-separator', props.class]">
    <slot>
      <ChevronRightIcon class="rtl:-scale-x-100" data-icon />
    </slot>
  </li>
</template>
```