Breadcrumb

Trail

Where a page sits in a hierarchy of three or more levels, each step a link back up. A flat site doesn't need one, and it doesn't replace the main navigation.

Basic

1. Home/
2. News/
3. Blu-ray BOX 発売決定

1. Character›
2. 加藤恵

<script setup lang="ts">
import { BlessBreadcrumb } from "blessing-ui";
</script>

<template>
  <div class="col" style="max-width: none">
    <BlessBreadcrumb
      :items="[
        { label: 'Home', href: '#' },
        { label: 'News', href: '#' },
        { label: 'Blu-ray BOX 発売決定' },
      ]"
    />
    <BlessBreadcrumb
      separator="›"
      :items="[{ label: 'Character', href: '#' }, { label: '加藤恵' }]"
    />
  </div>
</template>

• The last item is the current page (aria-current="page") and is not a link.
• Links go through your router when one is provided (Install).
• separator is drawn, not read; #item renders an item yourself with { item, last }.

Usage

import { BlessBreadcrumb } from "blessing-ui";

API

Props

Name	Type	Default	Description
items*	BlessCrumb[]	—
label	string	"Breadcrumb"
separator	string	"/"

Slots

Name	Scope	Description
item	{ item: BlessCrumb; last: boolean; }