Ui3nBreadcrumbs

Breadcrumbs navigation component for displaying hierarchical paths and navigation trails.

Ui3nBreadcrumbs

Container component for breadcrumb items.

Props

Name	Type	Default	Description
separator	string | undefined	"/"	Separator between breadcrumbs
disabled	boolean | undefined	false	Whether the breadcrumbs are disabled

Slots

Slot Name	Scope Props (v-slot)	Description
#separator	—	Global separator slot for the entire chain
#default	—	Default slot

Ui3nBreadcrumb

Individual breadcrumb item component.

Props

Name	Type	Default	Description
separator	string | undefined	—	Separator between breadcrumbs
isActive	boolean | undefined	false	Whether the breadcrumb is active
disabled	boolean | undefined	false	Whether the breadcrumb is disabled

Events

Event Name	Arguments / Value Type	Description
click	value: MouseEvent	—

Slots

Slot Name	Scope Props (v-slot)	Description
#separator	—	Separator slot
#default	—	Default slot

Usage Examples

Basic usage

Basic usage

Simple breadcrumbs with multiple navigation levels

Home

/

Products

/

Category

/

Current Page

/

Custom separator

Custom separator

Using different separator characters like arrow, chevron or pipe

Arrow separator:

Home

→

Products

→

Details

→

Chevron separator:

Home

›

Products

›

Details

›

Pipe separator:

Home

|

Products

|

Details

|

Click handling

Click handling

Active breadcrumbs with click event handling for navigation

Home

/

Products

/

Electronics

/

Smartphones

/

Current path: Home / Products / Electronics / Smartphones

Disabled state

Disabled state

Disabled breadcrumbs - entire container or individual items

All disabled:

Home

/

Products

/

Details

/

Individual disabled:

Home

/

Products (disabled)

/

Category

/

Details

/

Custom separator slot

Custom separator slot

Using the separator slot for custom icons or complex separators

With icon separator (Defined once on container):

Home

Products

Details

With local fallback override:

Dashboard

•

Settings

/

Profile

/