Breadcrumbs

Breadcrumbs are a great component for indicating the current page's location within a navigation.

Basic Example

The <d-breadcrumb> component comes with an :items prop that accepts an array of objects representing each breadcrumb menu item.

<template>
  <d-breadcrumb :items="breadcrumbItems"/>
</template>

<script>
export default {
  data () {
    return {
      breadcrumbItems: [{
        text: 'Products',
        href: '#'
      }, {
        text: 'Home',
        href: '#'
      }, {
        text: 'Lightbulbs',
        active: true
      }]
    }
  }
}
</script>

<!-- breadcrumb-1.vue -->

Manual Breadcrumbs

You can also compose your own breadscumb structures using the <d-breadcrumb-item> component.


<d-breadcrumb>
    <d-breadcrumb-item :active="false" text="Products" href="#" />
    <d-breadcrumb-item :active="false" text="Home" href="#" />
    <d-breadcrumb-item :active="true" text="Lightbulbs" href="#" />
</d-breadcrumb>

<!-- breadcrumb-2.vue -->

Props

Prop	Description	Type	Default	Required
:items	The breadcrumb items array.	`Array`	null	False

Subcomponents

The following subcomponents are available for the <d-breadcrumb/> component:

<d-breadcrumb-item/>

Props

Prop	Description	Type	Default	Required
:text	The breadcrumb item text.	`String`	null	False
:href	The breadcrumb item href.	`String`	"#"	False
:active	Whether it is active, or not.	`Boolean`	false	False

<d-breadcrumb-link/>

This subcomponent is inheriting Link component's props.

Props

Prop	Description	Type	Default	Required
:text	-	`String`	null	False
:active	-	`Boolean`	false	False
:href	-	`String`	"#"	False
:aria-current	-	`String`	"location"	False