# Breadcrumb
Breadcrumb is used to indicate the current hierarchy and location of current url.
# Simple usage
Provide array of objects to items
prop. Objects must have the following keys:
- page for current page name
- link for current page url, if link is not provided or empty it will show non active link
- active Boolean value which will add
active
class tobreadcrumb-item
and will add appropriate styles for active element.
By default, breadcrumb will have transparent background. You can change this by editing src/assets/scss/core/_variables.scss
variables file $breadcrumb-bg
property, or just wrap breadcrumb component in another element with desired background
<Breadcrumb :items="breadcrumb1" />
<div class="bg-success rounded">
<Breadcrumb :items="breadcrumb2" link-classes="text-white" />
</div><div class="bg-info rounded">
<Breadcrumb :items="breadcrumb2" link-classes="text-white" />
</div>
<div class="bg-warning rounded">
<Breadcrumb :items="breadcrumb2" link-classes="text-dark" />
</div>
<div class="bg-danger rounded">
<Breadcrumb :items="breadcrumb2" link-classes="text-white" />
</div>
<script>
export default{
data(){
return {
breadcrumb1: [
{
page: 'Home',
link: '/home',
},
{
page: 'Shopping Center',
link: '/en/shopping-center',
},
{
page: 'Product',
link: '/en/shopping-center/product-123',
active: true,
},
],
breadcrumb2: [
{
page: 'Home',
link: '/home',
},
{
page: 'Shopping Center',
},
{
page: 'Product',
link: '/en/shopping-center/product-123',
active: true,
},
]
}
}
}
</script>
# Props
name | description | required | type |
---|---|---|---|
items | Array of objects which contain keys page for page name and link (optional) and active to indicate if page should be marked as active (optional) | true | Array |
linkClasses | Additional classes that will be provided to .breadcrumb-link elements | false | Array or String |