Breadcrumb

Displays the path to the current resource using a hierarchy of links. Based on BrConfigProvider for global theming, supporting responsive folding and custom separators.

Basic Usage

The most basic breadcrumb navigation.

1. Home
3. Components
5. Breadcrumb

Example

Custom Separator

You can customize separators globally via props or locally using the default slot of BrBreadcrumbSeparator.

1. Home
2. /
3. Components
4. /
5. Custom Text

1. Home
2. 👉
3. Slot Separator

Example

Responsive Folding & Dropdown

When breadcrumbs get too long, use BrBreadcrumbEllipsis along with a dropdown menu (like DropdownMenu or a custom implementation) to fold items. This example shows a basic visual folding effect.

1. Home
3. More
5. Components
7. Breadcrumb

Example

Disabled Items & States

Control the state of a breadcrumb item via the state prop. Options include active (current page) and disabled (unclickable).

1. Home
3. Settings (Disabled)
5. Profile

Example

Theming

Breadcrumbs deeply integrate with BrConfigProvider. You can customize theming by supplying different color variables, or override styles directly with TailwindCSS classes.

1. Home
3. Theming

Example

API

BrBreadcrumb

Name	Type	Default	Description
separatorType	'icon' | 'text'	'icon'	Separator type
separator	string	'ChevronRight'	Separator value (icon name or string)

BrBreadcrumbItem

Name	Type	Default	Description
class	any	-	Custom class names

BrBreadcrumbLink

Name	Type	Default	Description
as	string	'a'	HTML element to render
href	string	-	Link destination
to	any	-	Vue Router navigation target
state	'default' | 'active' | 'disabled'	'default'	Active state of the link

BrBreadcrumbSeparator

Name	Type	Default	Description
separator	string	-	Overrides global separator