Breadcrumbs     

Quasar Breadcrumbs is a component used as a navigational aid in UI. It allows users to keep track of their location within programs, documents, or websites.

Installation

Edit /quasar.conf.js:

framework: {
  components: [
    'QBreadcrumbs',
    'QBreadcrumbsEl'
  ]
}

Basic Usage

<q-breadcrumbs>
  <q-breadcrumbs-el label="Home" icon="home" />
  <q-breadcrumbs-el label="Components" icon="widgets" />
  <q-breadcrumbs-el label="Breadcrumbs" icon="navigation" />
</q-breadcrumbs>

With route links and custom separator:

<q-breadcrumbs
  separator="->"
  active-color="secondary"
  color="light"
>
  <q-breadcrumbs-el label="Home" to="/" />
  <q-breadcrumbs-el label="Components" to="/components" />
  <q-breadcrumbs-el label="Breadcrumbs" to="/components/breadcrums" />
  <q-breadcrumbs-el label="Bogus" to="/components/breadcrums/bogus" />
</q-breadcrumbs>

With separator as scoped slot (in this case an icon, but can be anything):

<q-breadcrumbs>
  <q-icon name="trending_flat" slot="separator" slot-scope="props" />

  <q-breadcrumbs-el active>Home</q-breadcrumbs-el>
  <q-breadcrumbs-el>Components</q-breadcrumbs-el>
  <q-breadcrumbs-el>Breadcrumbs</q-breadcrumbs-el>
</q-breadcrumbs>

With different alignment:

<q-breadcrumbs align="center">
  <q-icon name="arrow_forward" slot="separator" slot-scope="props" />

  <q-breadcrumbs-el>Home</q-breadcrumbs-el>
  <q-breadcrumbs-el>Components</q-breadcrumbs-el>
  <q-breadcrumbs-el>Breadcrumbs</q-breadcrumbs-el>
</q-breadcrumbs>

QBreadcrumbs Vue Properties

Vue Property Type Description
color String A color from Quasar Color Palette
active-color String Active color, one from Quasar Color Palette
separator String Separator text between breadcrumb elements
align String One of ‘left’, ‘right’, ‘center’, ‘between’, ‘around’.

QBreadcrumbsEl Vue Properties

Vue Property Type Description
label String Label of element
icon String Icon for element
color String A color from Quasar Color Palette

If you want your QBreadcrumbsEl to act the same as Vue’s <router-link>, then you can use these additional properties (which work exactly the same as <router-link>):

Property Type Description
to String / Object Route to navigate to
exact Boolean Match the exact route specified (and not also its children) when adding router-link-active CSS class.
append Boolean Append route definition to current route when navigating.
replace Boolean Replaces current route with the new one instead of adding it to the window history queue.

For more details on these properties, please refer to the Vue Router documentation.

Context Menu Pagination
Last updated: Sat May 19 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub