QBreadcrumbs 🍞

Displays the location of the current page, shows all nested levels. Try a sandbox story

When to use

• When the system has more than two layers in a hierarchy.
• When you need to inform the user of where they are.
• When the user may need to navigate back to a higher level.

Example

Default view:

Using in template:

<q-breadcrumbs :route="route" />

Using in component instance:

setup() {
  const route = [
    {
      path: 'path-a',
      name: 'ROUTE_A',
      meta: {
        breadcrumb: 'First route'
      }
    },
    {
      path: 'path-b',
      name: 'ROUTE_b',
      meta: {
        breadcrumb: 'Second route'
      }
    },
    {
      path: 'path-c',
      name: 'ROUTE_c',
      meta: {
        breadcrumb: 'Third route'
      }
    },
  ];

  return { route }
}

import type { QBreadcrumbsPropRoute } from '@qvant/qui-max';

setup() {
  const route: QBreadcrumbsPropRoute = [
    {
      path: 'path-a',
      name: 'ROUTE_A',
      meta: {
        breadcrumb: 'First route'
      }
    },
    {
      path: 'path-b',
      name: 'ROUTE_b',
      meta: {
        breadcrumb: 'Second route'
      }
    },
    {
      path: 'path-c',
      name: 'ROUTE_c',
      meta: {
        breadcrumb: 'Third route'
      }
    },
  ];

  return { route };
}

Props

route

• Type: Array
• Default: null

import type { QBreadcrumbsPropRoute } from '@qvant/qui-max';

route MUST be an Array of Objects, each object MUST contain required fields:

• path - uses as route path
• name - route name
• meta - MUST contain:
  • breadcrumb - visible title

linkComponent

• Type: String
• Default: 'RouterLink'

The name of the component for enabling user navigation in a router-enabled app, if you use Vue Router, you don't need change this prop, RouterLink by default. With Nuxt change on NuxtLink

last

• Type: String

Changes last crumb with custom string

<q-breadcrumbs :route="route" last="Custom string" />