Breadcrumb

SBreadcrumb is a navigation trail from the root to the current page. Plain CSS on semantic markup (nav > ol): intermediate crumbs are links, the last one is marked aria-current="page". The separator is a reusable SIcon (replace it with your own through the #separator slot).

Basic usage

Home

Catalog

Smartphones

iPhone 15

<template>
  <SBreadcrumb
    :items="[
      { label: 'Home', href: '/' },
      { label: 'Catalog', href: '#' },
      { label: 'Smartphones', href: '#' },
      { label: 'iPhone 15' },
    ]"
  />
</template>

Custom separator

Home/

Settings/

Profile

<template>
  <SBreadcrumb :items="items">
    <template #separator>/</template>
  </SBreadcrumb>
</template>

Icons

The item's icon field renders a leading icon for the crumb (a registry name or a raw path).

Home

Settings

Profile

<template>
  <SBreadcrumb
    :items="[
      { label: 'Home', href: '/', icon: 'home' },
      { label: 'Settings', href: '#', icon: 'settings' },
      { label: 'Profile', icon: 'user' },
    ]"
  />
</template>

API

Props

Name	Type	Default	Description
items	{ label: string; href?: string; icon?: string }[]	[]	Path items from the root to the current page; the last one is treated as the current page.
aria-label	string	undefined	Accessible name of the navigation (aria-label; defaults to the locale dictionary).

Slots

Name	Description
separator	Custom separator between crumbs (an SIcon chevron by default).