Breadcrumb

Default

Pass an items array or compose with s-breadcrumb-item slots.

Code copied

<template>
  <s-breadcrumb :items="items" />
</template>

<script setup lang="ts">
const items = [
  { title: 'Dashboard', url: 'dashboard' },
  { title: 'Link 1', url: 'link-1' },
  { title: 'Link 2', disabled: true },
  { title: 'Active', active: true },
]

Tree shortcuts

items supports children. Hover a path item with children to open a multi-level menu, then choose any item for a quick jump.

Code copied

<template>
  <s-breadcrumb :items="items" separator="chevron_right" />
</template>

<script lang="ts" setup>
const items = [
  {
    title: 'Workspace',
    url: '#workspace',
    children: [
      { title: 'Overview', url: '#overview' },
      {
        title: 'Library',
        url: '#library',
        children: [
          { title: 'Components', url: '#components' },
          { title: 'Patterns', url: '#patterns' },
        ],
      },
    ],
  },
  {
    title: 'Components',
    url: '#components',
    children: [
      { title: 'Navigation', url: '#navigation' },
      { title: 'Feedback', url: '#feedback' },
      { title: 'Data entry', url: '#data-entry' },
    ],
  },
  { title: 'Breadcrumb', active: true },
]

Click trigger

Set trigger="click" to open menus by clicking a path item. You can pass an array to combine Popper trigger modes.

Code copied

<template>
  <s-breadcrumb :items="items" trigger="click" separator="chevron_right" />
</template>

<script lang="ts" setup>
const items = [
  {
    title: 'Workspace',
    url: '#workspace',
    children: [
      { title: 'Overview', url: '#overview' },
      {
        title: 'Library',
        url: '#library',
        children: [
          { title: 'Components', url: '#components' },
          { title: 'Patterns', url: '#patterns' },
        ],
      },
    ],
  },
  {
    title: 'Components',

Color

Theme breadcrumb links with the color prop.

Code copied

<template>
  <div class="center breadcrumb-color-demo">
    <input v-model="colorx" type="color" />

  </div>
</template>

Separator

Customize the divider between items.

Code copied

<template>
  <div class="center breadcrumb-separator-demo">
    <s-breadcrumb separator="•" :items="items" />

    <s-breadcrumb separator="|" :items="items" />
    <s-breadcrumb separator="chevron_right" :items="items" />
  </div>

Slot

Build breadcrumbs manually with slot-based items.

Code copied

<template>
  <s-breadcrumb>
    <li>
      <a href="#" title="Home">Home</a>
      <span class="vs-breadcrum--separator">/</span>
    </li>
    <li>

Alignment

Align the trail to the left, center, or right.

Code copied

<template>
  <div class="center breadcrumb-align-demo">
    <s-breadcrumb align="left" :items="items" />
    <s-breadcrumb align="center" :items="items" />
    <s-breadcrumb align="right" :items="items" />
  </div>

<script setup lang="ts">
const items = [

  { title: 'Link 1', url: 'link-1' },
  { title: 'Link 2', disabled: true },
  { title: 'Active', active: true },
]
</script>

<style scoped lang="scss">
.breadcrumb-align-demo {
  width: 100%;

API