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 | Color of active links (theme string or HEX string). |
|
|
| align | Customizes horizontal position of component (flex based). Available values are strings: 'left', 'center', 'right', 'between', 'around', 'stretch'. |
|
|
| ariaLabel | The aria-label of the component |
|
|
| color | Color of the component (theme string or |
|
|
| disabledColor |
|
| |
| preset | Named preset combination of component props. |
| - |
| separator | Element to separate breadcrumbs items. |
|
|
| separatorColor | Color of the separator icon (theme string or HEX string). |
|
|
| vertical | Displays vertically |
|
|
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 | Applied when the link is active. More info here. |
| - |
| append | When set, always appends the relative path to the current path. More info here. |
| - |
| disabled | Applies |
|
|
| exact | Exactly match the link. Without this, '/' will match every route. More info here. |
| - |
| exactActiveClass | Applied when the link is active with exact match. More info here. |
| - |
| href | Designates the component as anchor and applies the href attribute. More info here. |
| - |
| label | Component content (string). |
|
|
| replace | When set, calls |
| - |
| tag | Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases ( |
|
|
| target | Navigation target, More info here. |
| - |
| to | The target route of the link. More info here. |
| - |
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.