Breadcrumb | Tuff Docs

Usage

Items with href render as native links; items without one render as buttons and emit click.

Loading demo...

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

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.

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.

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

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`.

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 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.

packages/tuffex/packages/components/src/breadcrumb/index.ts