Breadcrumb

Use bo-breadcrumb for a short navigation trail that shows the current location inside a hierarchy. Items before the last item become links when they have an href; the last item is always rendered as the current page.

Basic Usage

Pass an ordered items array. label is required for every item, while href is optional.

1. Home/
2. Projects/
3. Bamboo

Current page: Bamboo

<bo-breadcrumb :items="items" />

Icons Before Items

Set icon on an item to render an icon before its label. The icon is decorative inside the breadcrumb because the label remains the item text.

1. Home/
2. Projects/
3. Bamboo

<bo-breadcrumb>
  :items="[
    { label: 'Home', href: '/', icon: 'home' },
    { label: 'Projects', href: '/projects', icon: 'folder' },
    { label: 'Bamboo', icon: 'file' },
  ]"
/>

Separator

Use separator to replace the default / between items. The separator is hidden from assistive technology because it is visual decoration.

1. Home›
2. Projects›
3. Bamboo

<bo-breadcrumb :items="items" separator="›" />

Usage Guidance

• Keep the trail short and use the final item for the current page.
• Supply links for navigable ancestors, but do not rely on an href on the final item because it is rendered as the current location.
• Use a meaningful aria-label when a page has more than one navigation landmark.

API Reference

Props

Prop	Type	Default	Description
id	string	Autogenerated	The navigation id.
dataTestId	string	Autogenerated	The test id attribute.
items	BoBreadcrumbItem[]	required	Ordered breadcrumb items.
separator	string	/	Text rendered between items.
role	HTMLAttributes['role']	-	Navigation role override.
ariaLabel	HTMLAttributes['aria-label']	Breadcrumb	Accessible name for the navigation landmark.

BoBreadcrumbItem

Field	Type	Default	Description
label	string	required	Text displayed for the item.
href	string	-	Link destination for non-final items.
icon	Icon	-	Icon rendered before the item label.