---
title: "Breadcrumb"
description: "A trail of links showing the current page's place in a hierarchy."
category: Navigation
status: beta
since: 0.3.4
tags: [breadcrumb, navigation, hierarchy]
syncStatus: reviewed
verified: true
---

## Usage

### Links and Manual Items
Items with `href` render as native links; other interactive items render as buttons and emit `click`.
::::TuffDemoWrapper{demo="BreadcrumbBreadcrumbTrailDemo" code-lang="vue"}
---
code: |
  <script setup lang="ts">
  const items = [
    { label: 'Home', href: '/', icon: 'i-carbon-home' },
    { label: 'Library' },
    { label: 'Data' },
  ]

  function onBreadcrumbClick(item: { label: string }, index: number) {
    console.log(item.label, index)
  }
  </script>

  <template>
    <TxBreadcrumb :items="items" @click="onBreadcrumbClick" />
  </template>
---
::::

### Separator Icon

```vue
<template>
  <TxBreadcrumb :items="items" separator-icon="i-carbon-caret-right" />
</template>
```

### Best Practices

- Order `items` from the broadest parent to the current page.
- Use `href` for real routes so native link behavior, such as the context menu and copy link, still works.
- Reserve items without `href` for virtual levels that need custom behavior; `href` links never emit `click`.
- Keep labels short: they describe the hierarchy, not the full page title.
- Don't disable the current item; the last item is already non-interactive.

## API Reference

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | `BreadcrumbItem[]` | required | Ordered entries; the last one is the current page. |
| `separatorIcon` | `string` | `'i-carbon-chevron-right'` | Icon between entries. |

### Events

| Event | Payload | Description |
|------|---------|-------------|
| `click` | `(item: BreadcrumbItem, index: number)` | Fires for an enabled, non-current item without `href`. |

### Types

`BreadcrumbItem`, one entry of `items`:

| Field | Type | Description |
|------|------|-------------|
| `label` | `string` | Visible text. |
| `href` | `string` | Native link target; ignored for the current and disabled items. |
| `icon` | `string` | `TxIcon` name shown before the text. |
| `disabled` | `boolean` | Blocks interaction and sets `aria-disabled`. |

## Overview

- The root is `<nav aria-label="Breadcrumb">` around an ordered list.
- The last item renders as `<span aria-current="page">` and stays inert even with `href`.
- Other enabled items render as `<a>` with `href`, using native navigation, or as `<button>` without it.
- Disabled items render as `<span aria-disabled="true">` and emit nothing.
- Separators appear only between items and are `aria-hidden`.
- Icon names are `i-`-prefixed icon classes, such as `i-carbon-home`.

## Technologies

- Source: `packages/tuffex/packages/components/src/breadcrumb/`.

<TuffDocSourceLink />