VBreadcrumbs API

Props

name	type	default
`active-class`	string	undefined
The class applied to the component when it is in an active state.
`active-color`	string	undefined
The applied color when the component is in an active state.
`bg-color`	string	undefined
Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disabled`	boolean	false
Removes the ability to click or target the component.
`divider`	string	'/'
Specifies the dividing character between items.
`icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Apply a specific icon using the v-icon component.
`items`	( \| string \| (Partial<LinkProps> & { title: string; disabled: boolean }) )[]	[]
An array of strings or objects used for automatically generating children components.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`tag`	string \| (new () => any) \| FunctionalComponent	'ul'
Specify a custom tag used on the root element.
`tile`	boolean	false
Removes any applied border-radius from the component.

Slots

never

{
  item: string | (Partial<LinkProps> & { title: string; disabled: boolean })
  index: number
}

{
  item: Partial<LinkProps> & { title: string; disabled: boolean }
  index: number
}

never

{
  item: Partial<LinkProps> & { title: string; disabled: boolean }
  index: number
}

`default`
The default Vue slot.
`divider`
The slot used for dividers.
`item`
Define a custom item appearance.
`prepend`
The slot used for prepend content.
`title`
The slot used to display the title of each breadcrumb.

SASS Variables

name	default
`$breadcrumbs-density`	('default': 0, 'comfortable': -1, 'compact': -2)
`$breadcrumbs-divider-padding`	0 8px
`$breadcrumbs-item-disabled-opacity`	var(--v-disabled-opacity)
`$breadcrumbs-item-icon-font-size`	tools.map-deep-get(settings.$typography, 'body-large', 'size')
`$breadcrumbs-item-icon-margin-inline-end`	2px
`$breadcrumbs-item-icon-margin-inline-start`	-4px
`$breadcrumbs-item-link-text-decoration`	underline
`$breadcrumbs-item-padding`	0 4px
`$breadcrumbs-line-height`	tools.map-deep-get(settings.$typography, 'body-large', 'line-height')
`$breadcrumbs-padding-x`	12px
`$breadcrumbs-padding-y`	16px
`$breadcrumbs-rounded-border-radius`	settings.$border-radius-root
`$breadcrumbs-vertical-align`	middle

#VBreadcrumbs API

VBreadcrumbs API