Enzyme UI

# 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 to breadcrumb-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

← Button →