# Breadcrumbs

The v-breadcrumbs component is a navigational helper for pages. It can accept a Material Icons icon or text characters as a divider. An array of objects can be passed to the items property of the component. Additionally, slots exists for more control of the breadcrumbs, either utilizing v-breadcrumbs-item or other custom markup.

# Usage

By default, breadcrumbs use a text divider. This can be any string.

# API

  • v-breadcrumbs
  • v-breadcrumbs-item

# Caveats

By default v-breadcrumbs will disable all crumbs up to the current page in a nested paths. You can prevent this behavior by using exact: true on each applicable breadcrumb in the items array.

# Examples

# Props

# Divider

Breadcrumbs separator can be set using divider property.


# Large

Large breadcrumbs have larger font size.


# Slots

# Icon Dividers

For the icon variant, breadcrumbs can use any icon in Material Design Icons.


# Item

You can use the item slot to customize each breadcrumb.


Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.

Edit this page on GitHub
Last updated:05/20/2022, 4:10:15 PM
Contents
  • Usage
  • API
  • Caveats
  • Examples
  • Props
  • Divider
  • Large
  • Slots
  • Icon Dividers
  • Item
Become a sponsor
Close

New content is available. Click Refresh to update.

Settings
Theme
Light
Dark
System
Mixed

Drawer navigation grouping
Standard
Alpha

Direction
LTR
RTL

API
Link Only
Inline