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.