Diamond Sponsors
LMAX Exchange
Intygrate
ResaleAI
Become a Patron
search
VueJobs
Core documentation
Getting started
keyboard_arrow_down
Quick Start
Why Vuetify?
Frequently asked questions
Sponsors and backers
Contributing
Roadmap
Application layout
keyboard_arrow_down
Pre-defined layouts
updated
Pre-made themes
updated
arrow_drop_down
Grid & breakpoints
Grid
Grid lists
Spacing
Text alignment
Display
Elevation
Sandbox
Styles & themes
keyboard_arrow_down
Colors
updated
Theme
updated
Typography
Content
Motion & transitions
keyboard_arrow_down
Scrolling
new
Transitions
UI components
keyboard_arrow_down
API explorer
new
Alerts
Avatars
Badges
Bottom navigation
Bottom sheets
Breadcrumbs
Buttons
Buttons: Floating Action Buttons
Cards
Carousels
Chips
Data iterator
Data tables
Dialogs
Dividers
Expansion panels
Footer
arrow_drop_down
Inputs & controls
Forms
Selects
Selection controls
Text fields
Icons
Lists
Jumbotrons
Menus
Navigation drawers
Paginations
Parallax
arrow_drop_down
Pickers
Date pickers
Time pickers
Progress
Sliders
Snackbars
Steppers
Subheaders
Tabs
Toolbars
Tooltips
Directives
keyboard_arrow_down
Resizing
Ripples
Scrolling
Touch support

Additional resources
Advanced tutorials
keyboard_arrow_down
Server side rendering
A la carte
Theme generator
new
Vuetify
DocsDocumentation
English
Русский
简体中文
한국어
日本語
Storestore
Quick Links
Reddit
Medium Publication
Awesome Vuetify
Codepen Template
Latest Releases

Social
GitHub
Twitter
Facebook
Chat
Create an Issue
GitHub Issue board
Stack overflow

Breadcrumbs

The v-breadcrumbs component is a navigational helper for pages. It can accept a Material Icons icon or characters as a divider. An array of objects containing the fields href, text and optional disabled can be passed to the items property of the component. Additionally, a regular slot 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.

Invert colors
View on Github
Edit in codepen
View source

  • template
    script
    style

API

props
slots
v-breadcrumbs
v-breadcrumbs-item
arrow_drop_down
search
Name
divider
Default
/
Type
String

Specifies the dividing character

Name
justify-center
Default
false
Type
Boolean

Align the breadcrumbs center

Name
justify-end
Default
false
Type
Boolean

Align the breadcrumbs at the end

Name
large
Default
false
Type
Boolean

Increase the font-size of the breadcrumb item text

Name
default

Default Vue slot

Examples

Icon dividers

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

Invert colors
View on Github
Edit in codepen
View source

  • template
    script
    style

Bottom sheets
Buttons