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

String

null

align

String

"left"

ariaLabel

String

"$t:breadcrumbs"

color

String

"secondary"

preset

String

-

separator

String

"/"

separatorColor

String

null

vertical

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

String

-

append

Boolean

-

disabled

Boolean

false

exact

Boolean

-

exactActiveClass

String

-

href

String

-

label

String

""

replace

Boolean

-

tag

String

"span"

target

String

-

to

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.