Breadcrumbs

Component, that helps to navigate between application pages and shows application structure.

Breadcrumbs is composed of 2 components:

• app-breadcrumbs - contains breadcrumbs functionality.
• vuestic-breadcrumbs - contains breadcrumbs view and necessary styles.

<app-breadcrumbs :breadcrumbs="{}"/>

Props

• breadcrumbs - Object - app configuration object.

Breadcrumbs object contains two properties: root - default breadcrumbs state, routes - other possible states.

{
  root: {
    path: '/',
    displayName: 'Home'
  },
  routes: [
    {
      path: 'dashboard',
      displayName: 'menu.dashboard'
    },
    {
      path: 'statistics',
      displayName: 'menu.statistics',
      disabled: true,
      children: [
        {
          path: 'charts',
          displayName: 'menu.charts',
        },
        {
          path: 'progress-bars',
          displayName: 'menu.progressBars'
        },
      ]
    },
    ...
}

Each breadcrumbs state is an object with following properties:

• path: String - name of route
• displayName: String - name, which shows in app
• disabled: Boolean - possibility to click on displayed name in order to redirect to other page
• children: Array - states, that depend on current state

<vuestic-breadcrumbs :breadcrumbs="" :current-path=""/>

Props

• breadcrumbs - Object - pre-transformed configuration object.
• current-path - String - default route path.