Introduction
Getting started
Features
Styles and animations
UI Components
Alerts
Application
Aspect ratios
Avatars
Badges
Banners
Bars
Bottom navigation
Bottom sheets
Breadcrumbs
Buttons
Buttons: Floating Action Button
Calendars
Cards
Carousels
Chips
Dialogs
Dividers
Expansion panels
Footers
Form inputs & controls
Grid system
Groups
Hover
Icons
Images
Lazy
Lists
Menus
Navigation drawers
Overlays
Pagination
Parallax
Pickers
Progress
Ratings
Sheets
Skeleton loaders
Snackbars
Sparklines
Steppers
Subheaders
Tables
Tabs
Timelines
Tooltips
Treeview
Virtual scroller
API
Directives
Resources
About

# 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.
Buttons
Components
Navigation drawers
Components
Icons
Components

← Bottom sheets
Buttons →
Edit this page on GitHub
Last updated:07/06/2020, 1:12:04 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