Breadcrumbs

Navigation component showing page hierarchy for wayfinding.

Open in Storybook

Interactive Demo

1. Home /
2. Settings /
3. Profile

Usage

<script setup>
import { BreadcrumbGroup } from '@yellowcard/b2b-design-system';

const items = [
  { label: 'Home', href: '/' },
  { label: 'Settings', href: '/settings' },
  { label: 'Profile' },
];
</script>

<template>
  <BreadcrumbGroup :items="items" />
</template>

API Reference

Props

Prop	Type	Default	Description
items*	BreadcrumbItem[]	—	Array of breadcrumb items with label and optional href
ariaLabel	string	'Breadcrumb'	Accessible label for nav element
maxItems	number	—	Max visible items before collapsing
collapseLabel	string	—	Label for collapsed items trigger