Breadcrumbs

Navigation trail rendered as router links inside a labelled <nav>, with a chevron between the levels.

Import

import { Breadcrumbs } from 'vuiii'
import type { BreadcrumbItems } from 'vuiii'

Basic Usage

Every item is a link, and link is required on each. The last one additionally carries aria-current="page", so assistive technology knows which level is the page being viewed.

Home

Products

Electronics

View in Storybook

<script setup>
import type { BreadcrumbItems } from 'vuiii'

const breadcrumbs: BreadcrumbItems = [
  { label: 'Home', link: '/' },
  { label: 'Products', link: '/products' },
  { label: 'Electronics', link: '/products/electronics' },
]
</script>

<template>
  <Breadcrumbs :breadcrumbs="breadcrumbs" />
</template>

Props

Prop	Type	Default	Description
breadcrumbs	BreadcrumbItems	[]	The trail, root first

type BreadcrumbItems = {
  label: string
  link: string | RouteLocationRaw
}[]

Named Routes

link takes anything router-link accepts, so named routes with params work as well as paths.

Dashboard

Users

John Doe

<script setup>
const breadcrumbs: BreadcrumbItems = [
  { label: 'Dashboard', link: { name: 'dashboard' } },
  { label: 'Users', link: { name: 'users' } },
  { label: 'John Doe', link: { name: 'user', params: { id: 123 } } },
]
</script>

<template>
  <Breadcrumbs :breadcrumbs="breadcrumbs" />
</template>

A Single Level

One item renders on its own, with no chevron.

Settings

Requires vue-router

The links render as router-link, so this component needs vue-router registered in your app. See Requirements.

Storybook

For interactive examples with all variants, see Breadcrumbs in Storybook.