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.

Open in GitHub

Align
#

Changes component position on the page.

Open in GitHub

Separator
#

You can use your own separator and customize its color.

Open in GitHub

Color
#

Sets color of breadcrumbs content

Open in GitHub

Active color
#

Color of active va-breadcrumb-item elements.

Open in GitHub

Item
#

Some va-breadcrumbs-item props examples.

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
activeColor

Color of active links (theme string or HEX string).

String

null

align

Customizes horizontal position of component (flex based). Available values are strings: 'left', 'center', 'right', 'between', 'around', 'stretch'.

String

"left"

ariaLabel

The aria-label of the component

String

"$t:breadcrumbs"

color

Color of the component (theme string or HEX string).

String

null

disabledColor

String

"secondary"

preset

Named preset combination of component props.

String | Array

-

separator

Element to separate breadcrumbs items.

String

"/"

separatorColor

Color of the separator icon (theme string or HEX string).

String

null

vertical

Displays vertically

Boolean

false

Slots #

NameDescription

default

One or more va-breadcrumbs-item elements.

separator

Separator element. Can be string or vue component.

Css Variables #

NameDefault 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 #

NameDescriptionTypesDefault
activeClass

Applied when the link is active. More info here.

String

-

append

When set, always appends the relative path to the current path. More info here.

Boolean

-

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

exact

Exactly match the link. Without this, '/' will match every route. More info here.

Boolean

-

exactActiveClass

Applied when the link is active with exact match. More info here.

String

-

href

Designates the component as anchor and applies the href attribute. More info here.

String

-

label

Component content (string).

String

""

replace

When set, calls router.replace() instead of router.push() when navigated, so it will not leave a history record. More info here.

Boolean

-

tag

Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases (ul > li and tr > td etc.).

String

"span"

target

Navigation target, More info here.

String

-

to

The target route of the link. More info here.

String | Object

-

Slots #

NameDescription

default

Component content.

FAQ
#

Can 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.