Breadcrumbs

Navigation breadcrumbs with router-link support.

Import

import { Breadcrumbs } from 'vuiii'

Basic Usage

View in Storybook

// Basic usage
import { Breadcrumbs } from 'vuiii'
import type { BreadcrumbItems } from 'vuiii'

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

<Breadcrumbs :breadcrumbs="breadcrumbs" />

More Examples

// With named routes
const breadcrumbs: BreadcrumbItems = [
  { label: 'Dashboard', link: { name: 'dashboard' } },
  { label: 'Users', link: { name: 'users' } },
  { label: 'John Doe', link: { name: 'user', params: { id: 123 } } }
]

Storybook

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