Breadcrumbs

Usage

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

<script setup lang="ts">import type { BreadcrumbsItem } from '@hareui/vue'import { Breadcrumbs } from '@hareui/vue'const items: BreadcrumbsItem[] = [  { label: 'Home', href: '#' },  { label: 'Products', href: '#' },  { label: 'Electronics', href: '#' },  { label: 'Laptop' },]</script><template>  <Breadcrumbs :items="items" /></template>

Anatomy

HeroUI's Breadcrumbs.Item children become an items array. The last item is the current page.

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

const items = [
  { label: 'Home', href: '#' },
  { label: 'Category', href: '#' },
  { label: 'Current Page' },
]
</script>

<template>
  <Breadcrumbs :items="items">
    <template #item="{ item, index, current }" />  <!-- replaces an item's label -->
    <template #separator="{ item, index }" />      <!-- replaces the chevron -->
  </Breadcrumbs>
</template>

`ui` key	`data-slot`	Element
`base`	`breadcrumbs`	`<ol>` root
`item`	`breadcrumbs-item`	`<li>` per item (an item's `class` is merged here)
`link`	`link`	the item's Link
`separator`	`breadcrumbs-separator`	separator icon between items

Typing items

items takes the exported BreadcrumbsItem type. Extra fields are kept: extend the type, and the slots receive your type, so no casts are needed.

import type { BreadcrumbsItem } from '@hareui/vue'

interface MyItem extends BreadcrumbsItem {
  icon: string
}

const items: MyItem[] = [/* ... */]
// <template #item="{ item }"> — item.icon is a string

Examples

Home
Current Page

<script setup lang="ts">import type { BreadcrumbsItem } from '@hareui/vue'import { Breadcrumbs } from '@hareui/vue'const items: BreadcrumbsItem[] = [  { label: 'Home', href: '#' },  { label: 'Current Page' },]</script><template>  <Breadcrumbs :items="items" /></template>

Home
Category
Current Page

<script setup lang="ts">import type { BreadcrumbsItem } from '@hareui/vue'import { Breadcrumbs } from '@hareui/vue'const items: BreadcrumbsItem[] = [  { label: 'Home', href: '#' },  { label: 'Category', href: '#' },  { label: 'Current Page' },]</script><template>  <Breadcrumbs :items="items" /></template>

Disabled State

Home
Products
Electronics
Laptop

<script setup lang="ts">import type { BreadcrumbsItem } from '@hareui/vue'import { Breadcrumbs } from '@hareui/vue'const items: BreadcrumbsItem[] = [  { label: 'Home', href: '#' },  { label: 'Products', href: '#' },  { label: 'Electronics', href: '#' },  { label: 'Laptop' },]</script><template>  <Breadcrumbs disabled :items="items" /></template>

Custom Separator

A single root element in #separator receives the separator classes, like HeroUI's separator element.

<script setup lang="ts">import type { BreadcrumbsItem } from '@hareui/vue'import { Breadcrumbs } from '@hareui/vue'const items: BreadcrumbsItem[] = [  { label: 'Home', href: '#' },  { label: 'Products', href: '#' },  { label: 'Electronics', href: '#' },  { label: 'Laptop' },]</script><template>  <Breadcrumbs :items="items">    <template #separator>      <svg viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg">        <path d="M249.3 235.8c10.2 12.6 9.5 31.1-2.2 42.8l-128 128c-9.2 9.2-22.9 11.9-34.9 6.9S64.5 396.9 64.5 384l0-256c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l128 128 2.2 2.4z" />      </svg>    </template>  </Breadcrumbs></template>

Customization

Tailwind CSS

Home
Products
Laptop

<script setup lang="ts">import type { BreadcrumbsItem } from '@hareui/vue'import { Breadcrumbs } from '@hareui/vue'const items: BreadcrumbsItem[] = [  { label: 'Home', href: '#', class: 'text-muted hover:text-accent' },  { label: 'Products', href: '#', class: 'text-muted hover:text-accent' },  { label: 'Laptop', class: 'font-medium text-foreground' },]</script><template>  <Breadcrumbs class="rounded-lg bg-default-soft px-3 py-2" :items="items" /></template>

Global Configuration

To customize the Breadcrumbs classes for the whole app, extend the breadcrumbs theme in createHareUI:

app.use(createHareUI({
  ui: {
    breadcrumbs: {
      slots: {
        base: 'gap-4 text-lg',
        link: 'font-semibold',
        separator: 'text-blue-500',
      },
    },
  },
}))

Styling Reference

Slots

base → [data-slot="breadcrumbs"] – base breadcrumbs container
item → [data-slot="breadcrumbs-item"] – individual breadcrumb item wrapper
link → [data-slot="breadcrumbs-item"] [data-slot="link"] – breadcrumb link element
separator → [data-slot="breadcrumbs-separator"] – separator icon between items

State Attributes

[data-slot="link"][data-current="true"] – current page indicator (not a link)

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

Current: [data-current="true"] on link (indicates current page)
Hover: Link elements support standard hover states
Disabled: disabled prop disables all links

API Reference

Props

Prop	Type	Default	Description
`as`	`AsTag \| Component`	`"ol"`	The element or component to render the list as.
`items`	`BreadcrumbsItem[]`	-	The breadcrumb items, from the root to the current page.
`disabled`	`boolean`	`false`	Whether all breadcrumb links are disabled.
`ui`	`ComponentSlots<{ slots: { base: string; item: string; link: string; separator: string; }; variants: {}; defaultVariants: {}; }>`	-	Per-slot class overrides.

Slots

Slot	Props	Description
`item`	`ItemSlotProps`	Replaces an item's label.
`separator`	`ItemSlotProps`	Custom separator between items (HeroUI's `separator` prop). A single root element receives the themed separator classes and `data-slot="breadcrumbs-separator"`.

Accessibility

The root is an <ol> labelled "Breadcrumbs"; every item is an <li>.
The current page (the last item) is a non-interactive role="link" element with aria-current="page".
Disabled links render without href and with aria-disabled="true".