IBreadcrumb ​

The path to where you are. The last item is the current page and carries no link.

<script setup lang="ts">
const trail = [
  { label: 'Clients', href: '/clients' },
  { label: 'Northwind Supply', href: '/clients/northwind' },
  // No href: this is the page you are on.
  { label: 'INV-1042' },
]
</script>

<template>
  <IBreadcrumb :items="trail" />
</template>

Omitting href marks the current page, which is announced with aria-current="page".

With a router ​

Use onSelect instead of href when navigation goes through a router rather than the browser.

<script setup lang="ts">
const router = useRouter()

const trail = [
  { label: 'Clients', onSelect: () => router.push('/clients') },
  { label: 'Northwind Supply', onSelect: () => router.push('/clients/northwind') },
  { label: 'INV-1042' },
]
</script>

Icons ​

An item can carry an icon. One on the root of the trail is usually enough.

<script setup lang="ts">
import { Home01Icon } from '@hugeicons/core-free-icons'

const trail = [
  { label: 'Home', href: '/', icon: Home01Icon },
  { label: 'Clients', href: '/clients' },
  { label: 'Northwind Supply' },
]
</script>

Collapsing a long trail ​

max caps how many crumbs show. The first stays, the last max - 1 stay, and the rest fold into a "…" menu.

<IBreadcrumb :items="deep" :max="3" />

Hidden crumbs open through onSelect when they have one, or navigate to their href. Menu rows aren't real links, so middle-click won't open them in a new tab.

A custom separator ​

The separator slot replaces the divider between crumbs.

<IBreadcrumb :items="trail">
  <template #separator>
    <span class="text-muted-foreground">/</span>
  </template>
</IBreadcrumb>

Props ​

interface BreadcrumbItem {
  label: string
  /** Omit on the current page. */
  href?: string
  icon?: IconLike
  /** Handle navigation yourself, e.g. with a router. */
  onSelect?: () => void
}

A breadcrumb describes where a page sits in the hierarchy, not the route the reader took to reach it. IPageHeader has a slot for one.