Breadcrumbs #
The breadcrumbs component is used for application navigation. It shows the location of the current page within the navigation hierarchy. Itโs used with va-breadcrumb-item
components.
Examples #
Default #
This is a basic usage of the va-breadcrumbs
component.
Align #
Changes component position on the page.
Separator #
You can use your own separator and customize its color.
Color #
Sets color of breadcrumbs content
Active color #
Color of active va-breadcrumb-item
elements.
Item #
Some va-breadcrumbs-item
props examples.
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
activeColor |
|
| |
align |
|
| |
ariaLabel |
|
| |
color |
|
| |
preset |
| - | |
separator |
|
| |
separatorColor |
|
| |
vertical |
|
|
Slots #
Name | Description |
---|---|
default | One or more |
separator | Separator element. Can be string or vue component. |
Css Variables #
Name | Default Value |
---|---|
--va-breadcrumbs-display | flex |
--va-breadcrumbs-width | 100% |
--va-breadcrumbs-justify-content | center |
--va-breadcrumbs-item-display | inline-flex |
--va-breadcrumbs-separator-padding | var(--va-breadcrumbs-separator-py) var(--va-breadcrumbs-separator-px) |
--va-breadcrumbs-separator-py | 0 |
--va-breadcrumbs-separator-px | 0.5rem |
--va-breadcrumbs-separator-display | inline-flex |
Item API #
API for va-breadcrumb-item
component.
Props #
Name | Description | Types | Default |
---|---|---|---|
activeClass |
| - | |
append |
| - | |
disabled |
|
| |
exact |
| - | |
exactActiveClass |
| - | |
href |
| - | |
label |
|
| |
replace |
| - | |
tag |
|
| |
target |
| - | |
to |
| - |
Slots #
Name | Description |
---|---|
default | Component content. |
FAQ #
Can separator
prop work with separator
slot? #
separator
prop work with separator
slot?No, slot has higher priority, prop is ignored when slot is used. Same is legit for label
of va-breadcrumbs-item
, it is ignored when you use default
slot.