Breadcrumbs

Navigation breadcrumbs showing the current page location within a hierarchy.

Import

<script setup lang="ts">
import { Breadcrumbs, BreadcrumbsItem } from '@heroui-vue/vue'
</script>

Usage

Basic

1. Home
2. Products
3. Electronics
4. Laptop

<template>
  <Breadcrumbs>
    <BreadcrumbsItem href="#">Home</BreadcrumbsItem>
    <BreadcrumbsItem href="#">Products</BreadcrumbsItem>
    <BreadcrumbsItem href="#">Electronics</BreadcrumbsItem>
    <BreadcrumbsItem>Laptop</BreadcrumbsItem>
  </Breadcrumbs>
</template>

<script setup lang="ts">
import { Breadcrumbs, BreadcrumbsItem } from '@heroui-vue/vue'
</script>

Level 2

1. Home
2. Current Page

<template>
  <Breadcrumbs>
    <BreadcrumbsItem href="#">Home</BreadcrumbsItem>
    <BreadcrumbsItem>Current Page</BreadcrumbsItem>
  </Breadcrumbs>
</template>

<script setup lang="ts">
import { Breadcrumbs, BreadcrumbsItem } from '@heroui-vue/vue'
</script>

Level 3

1. Home
2. Category
3. Current Page

<template>
  <Breadcrumbs>
    <BreadcrumbsItem href="#">Home</BreadcrumbsItem>
    <BreadcrumbsItem href="#">Category</BreadcrumbsItem>
    <BreadcrumbsItem>Current Page</BreadcrumbsItem>
  </Breadcrumbs>
</template>

<script setup lang="ts">
import { Breadcrumbs, BreadcrumbsItem } from '@heroui-vue/vue'
</script>

Custom Separator

1. Home
2. Products
3. Electronics
4. Laptop

<template>
  <Breadcrumbs>
    <template #separator>
      <svg class="demo-breadcrumbs-separator" 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>

    <BreadcrumbsItem href="#">Home</BreadcrumbsItem>
    <BreadcrumbsItem href="#">Products</BreadcrumbsItem>
    <BreadcrumbsItem href="#">Electronics</BreadcrumbsItem>
    <BreadcrumbsItem>Laptop</BreadcrumbsItem>
  </Breadcrumbs>
</template>

<script setup lang="ts">
import { Breadcrumbs, BreadcrumbsItem } from '@heroui-vue/vue'
</script>

<style lang="less">
.demo-breadcrumbs-separator {
  width: 0.75rem;
  height: 0.75rem;
  fill: currentcolor;
}
</style>

Disabled

1. Home
2. Products
3. Electronics
4. Laptop

<template>
  <Breadcrumbs is-disabled>
    <BreadcrumbsItem href="#">Home</BreadcrumbsItem>
    <BreadcrumbsItem href="#">Products</BreadcrumbsItem>
    <BreadcrumbsItem href="#">Electronics</BreadcrumbsItem>
    <BreadcrumbsItem>Laptop</BreadcrumbsItem>
  </Breadcrumbs>
</template>

<script setup lang="ts">
import { Breadcrumbs, BreadcrumbsItem } from '@heroui-vue/vue'
</script>

Anatomy

<template>
  <Breadcrumbs>
    <BreadcrumbsItem href="#">Home</BreadcrumbsItem>
    <BreadcrumbsItem href="#">Products</BreadcrumbsItem>
    <BreadcrumbsItem>Current Page</BreadcrumbsItem>
  </Breadcrumbs>
</template>

API

Breadcrumbs Props

Prop	Type	Default	Description
separator	'chevron' | 'slash'	'chevron'	Built-in separator shown between items. Use the separator slot for custom icons.
isDisabled	boolean	false	Disable every breadcrumb link.
class	string	undefined	Additional classes for the list.

BreadcrumbsItem Props

Prop	Type	Default	Description
href	string	undefined	Link destination. Items without href are current page labels.
isCurrent	boolean	undefined	Force current page state.
isDisabled	boolean	false	Disable this item.
target	string	undefined	Anchor target.
rel	string	undefined	Anchor relationship.