Breadcrumb

Displays the current page path and allows quick navigation back to any previous page.

Showcase

The breadcrumb component supports dynamic level management and smart path collapsing.

Max items:

Home/...Navigation/Breadcrumb Config/Current Node/

Smart Overflow

Basic Usage

The most basic usage. Use the to prop to set the navigation path.

Home/Components/Breadcrumb/

Basic Usage

Custom Separator

Customize the separator string with the separator prop.

Home>Level 1>Level 2>

Home~Level 1~Level 2~

Custom Separator

🚀 Advanced Features

1. Smart Overflow Collapse

When navigation levels are too deep, setting max-items will automatically collapse intermediate items into .... This greatly protects UI layout in narrow containers or deeply nested business logic.

2. Seamless Router Adaptation (NuxtLink Compatible)

The component's underlying layer automatically detects the Nuxt environment. When used in Nuxt 3/4, route navigation is automatically handled by NuxtLink, supporting Prefetch.

Use in Nuxt

YhBreadcrumb fully supports Nuxt auto-import.

Home/Dashboard/

Use in Nuxt

API

Breadcrumb Props

Prop	Description	Type	Default
separator	Separator string	string	/
separator-icon	Separator icon component	string | Component	—
max-items	Maximum number of displayed items, collapses when exceeded	number	0 (no collapse)

BreadcrumbItem Props

Prop	Description	Type	Default
to	Route navigation target	string | object	—
replace	Whether to replace the current route	boolean	false

Theme Variables

Variable	Description	Default
--yh-breadcrumb-font-size	Font size	14px
--yh-breadcrumb-item-color	Default text color	var(--yh-text-color-regular)
--yh-breadcrumb-last-color	Last item text color	var(--yh-text-color-primary)