Breadcrumb

Breadcrumb can be used with embedded BreadcrumbItem.

Demos

Using inline BreadcrumbItems

Can be used with embedded BreadcrumbItems.

<template>
<article>
  <veui-breadcrumb>
    <veui-breadcrumb-item to="./breadcrumb">
      Home
    </veui-breadcrumb-item>
    <veui-breadcrumb-item to="./breadcrumb">
      Components
    </veui-breadcrumb-item>
    <veui-breadcrumb-item type="text">
      Breadcrumb
    </veui-breadcrumb-item>
  </veui-breadcrumb>
</article>
</template>

<script>
import { Breadcrumb, BreadcrumbItem } from 'veui'

export default {
  components: {
    'veui-breadcrumb': Breadcrumb,
    'veui-breadcrumb-item': BreadcrumbItem
  }
}
</script>

Using datasource

Can be used with routes prop as well.

<template>
<article>
  <veui-breadcrumb :routes="routes"/>
</article>
</template>

<script>
import { Breadcrumb } from 'veui'

export default {
  components: {
    'veui-breadcrumb': Breadcrumb
  },
  data () {
    return {
      routes: [
        {
          to: './breadcrumb',
          label: 'Home'
        },
        {
          to: './breadcrumb',
          label: 'Components'
        },
        {
          label: 'Breadcrumb'
        }
      ]
    }
  }
}
</script>

Customizable separators

Separators can be customized.

<template>
<article>
  <veui-breadcrumb :routes="routes">
    <template slot="separator">
      -
    </template>
  </veui-breadcrumb>
  <veui-breadcrumb :routes="routes">
    <template slot="separator">
      <veui-icon name="arrow-right"/>
    </template>
  </veui-breadcrumb>
</article>
</template>

<script>
import { Breadcrumb } from 'veui'
import 'veui-theme-one/icons/arrow-right'

export default {
  components: {
    'veui-breadcrumb': Breadcrumb
  },
  data () {
    return {
      routes: [
        {
          to: './breadcrumb',
          label: 'Home'
        },
        {
          to: './breadcrumb',
          label: 'Components'
        },
        {
          label: 'Breadcrumb'
        }
      ]
    }
  }
}
</script>

Events mode

Listening to redirect event.

Not redirected yet. 
<template>
<article>
  <veui-breadcrumb
    :routes="routes"
    @redirect="handleRedirect"
  />
  <div class="console">
    <template v-if="currentRoute">
      Redirected to <b>{{ currentRoute.label }}</b>.
    </template>
    <template v-else></template>
  </div>
</article>
</template>

<script>
import { Breadcrumb } from 'veui'
import 'veui-theme-one/icons/arrow-right'

export default {
  components: {
    'veui-breadcrumb': Breadcrumb
  },
  data () {
    return {
      currentRoute: null,
      routes: [
        {
          label: 'Home',
          type: 'link'
        },
        {
          label: 'Components',
          type: 'link'
        },
        {
          label: 'Breadcrumb'
        }
      ]
    }
  },
  methods: {
    handleRedirect (event, route) {
      this.currentRoute = route
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
routesArray<Object>[]

The datasource for breadcrumb items. The type of items is {label: string, type: string, to: string|Object, native: boolean=}. Properties apart from label can be referred to the props of BreadcrumbItem component.

The last item will always be displayed as plain text by default.

Slots

NameDescription
defaultThe items of the breadcrumb. Can only have BreadcrumbItem components as direct children. routes prop will be ignored when this slot is specified.
item

The content of each breadcrumb item. Default to the label properties of each item within routes, or the default slot content of BreadcrumbItem components.

NameTypeDescription
routeObjectThe item in routes. Custom properties will also be passes into the scope object.
separator

Separator between adjacent breadcrumb items. Displays a globally configured icon by default.

When using Vue.js version 2.5.17 and below, it's required to bind a slot-scope.

Events

NameDescription
redirect

Triggered when clicking the item with type value link. The callback parameter list is (event, route, index).

NameTypeDescription
eventEventNative click event object.
routeObjectThe corresponding route item in routes.
indexnumberThe index of the clicked item.