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.


Edit /quasar.conf.js:

framework: {
components: [

Basic Usage

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

With route links and custom separator:

<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" />

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

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

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

With different alignment:

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


QBreadcrumbs Vue Properties

Vue PropertyTypeDescription
colorStringA color from Quasar Color Palette
active-colorStringActive color, one from Quasar Color Palette
separatorStringSeparator text between breadcrumb elements
alignStringOne of ‘left’, ‘right’, ‘center’, ‘between’, ‘around’.

QBreadcrumbsEl Vue Properties

Vue PropertyTypeDescription
labelStringLabel of element
iconStringIcon for element
colorStringA 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>):

toString / ObjectRoute to navigate to
exactBooleanMatch the exact route specified (and not also its children) when adding router-link-active CSS class.
appendBooleanAppend route definition to current route when navigating.
replaceBooleanReplaces 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.