Breadcrumb

Breadcrumbs show the current page's hierarchical location within a site or application, helping users understand the structure and navigate quickly.

Basic Usage

Pass an array of breadcrumb items via the items prop. Set active on the last item to mark the current page.

<TBreadcrumb :items="[
  { text: 'Home', href: '#/' },
  { text: 'Library', href: '#/library' },
  { text: 'Data', active: true },
]"/>

Separator Styles

The separator prop changes the separator style: dots, arrows, or bullets.

Dots

<TBreadcrumb separator="dots" :items="[
  { text: 'Home', href: '#' },
  { text: 'Library', href: '#' },
  { text: 'Data', active: true },
]"/>

Arrows

<TBreadcrumb separator="arrows" :items="[
  { text: 'Home', href: '#' },
  { text: 'Library', href: '#' },
  { text: 'Data', active: true },
]"/>

Bullets

<TBreadcrumb separator="bullets" :items="[
  { text: 'Home', href: '#' },
  { text: 'Library', href: '#' },
  { text: 'Data', active: true },
]"/>

With Icons

Each breadcrumb item accepts an icon prop to pass an icon component from @tabler/icons-vue.

<TBreadcrumb :items="[
    { text: 'Home', href: '/', icon: IconHome },
    { text: 'Library', href: '#', icon: IconFolder },
    { text: 'Data', active: true, icon: IconFile },
  ]"></TBreadcrumb>

Muted Style

Set the muted prop to apply a subdued visual style, suitable for secondary navigation areas.

<TBreadcrumb muted :items="[
  { text: 'Home', href: '#' },
  { text: 'Library', href: '#' },
  { text: 'Data', active: true },
]"/>

API

Props

Prop	Description	Type	Default
items	Array of breadcrumb items	BreadcrumbItem[]	[]
separator	Separator style	'default' | 'dots' | 'arrows' | 'bullets'	'default'
muted	Enable subdued visual style	boolean	false

BreadcrumbItem Type

Property	Description	Type	Default
text	Display text	string	—
href	Link URL (renders as <span> when omitted)	string	undefined
icon	Icon component	Component	undefined
active	Whether the item is active (current page)	boolean	false

Slots

Slot	Description
item-{index}	Custom content for a single breadcrumb item, scoped with { item }