Vue Bootstrap Breadcrumb

Vue Breadcrumbs - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Vue Breadcrumbs indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Overview

Separators are automatically added in CSS through ::before and content.

Show code

template
script

        
            
      <template>
        <div>
          <mdb-breadcrumb>
            <mdb-breadcrumb-item active>Home</mdb-breadcrumb-item>
          </mdb-breadcrumb>
          <mdb-breadcrumb>
            <mdb-breadcrumb-item><a href="#">Home</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item active>Library</mdb-breadcrumb-item>
          </mdb-breadcrumb>
          <mdb-breadcrumb>
            <mdb-breadcrumb-item><a href="#">Home</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item><a href="#">Library</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item active>Data</mdb-breadcrumb-item>
          </mdb-breadcrumb>
        </div>
      </template>

        
            
      <script>
        import {
          mdbBreadcrumb,
          mdbBreadcrumbItem
        } from 'mdbvue';
        export default {
          name: 'Breadcrumb',
          components: {
            mdbBreadcrumb,
            mdbBreadcrumbItem
          }
        }
      </script>

Changing the separator

Separators are automatically added in CSS through ::before and content. They can be changed by changing $breadcrumb-divider. The quote function is needed to generate the quotes around a string, so if you want > as a separator, you can use this:

Show code

SCSS

        
            
      $breadcrumb-divider: quote(">");

It’s also possible to use a base64 embedded SVG icon:

Show code

template

        
            
      $breadcrumb-divider:
      url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

The separator can be removed by setting $breadcrumb-divider to none:

Show code

template

        
            
      $breadcrumb-divider: none;

Accessibility

Since breadcrumbs provide navigation, it’s a good idea to add a meaningful label such as aria-label="breadcrumb" to describe the type of navigation provided in the <nav> element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.

For more information, see the WAI-ARIA Authoring Practices for the breadcrumb pattern.

Examples

With breadcrumbs you can use different types of colors or you can implement icons or images with our breadcrumbs.

Here are some examples.

Breadcrumbs with dark background

Show code

template
script
style

        
            
      <template>
        <div>
          <mdb-breadcrumb color="default">
            <mdb-breadcrumb-item><a href="#" class="white-text">Home</a></mdb-breadcrumb-item>
          </mdb-breadcrumb>
          <mdb-breadcrumb class="light-font" color="primary">
            <mdb-breadcrumb-item><a href="#" class="white-text">Home</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item><a href="#" class="white-text">Library</a></mdb-breadcrumb-item>
          </mdb-breadcrumb>
          <mdb-breadcrumb class="mb-0 light-font" color="secondary">
            <mdb-breadcrumb-item><a href="#" class="white-text">Home</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item><a href="#" class="white-text">Library</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item active>Data</mdb-breadcrumb-item>
          </mdb-breadcrumb>
        </div>
      </template>

        
            
      <script>
        import {
          mdbBreadcrumb,
          mdbBreadcrumbItem
        } from 'mdbvue';
        export default {
          name: 'Breadcrumb',
          components: {
            mdbBreadcrumb,
            mdbBreadcrumbItem
          }
        }
      </script>

        
            
      <style scoped>
        .light-font .breadcrumb-item+.breadcrumb-item::before {
          color: #fff;
        }

        .light-font .breadcrumb-item.active {
          color: #cfd8dc;
        }
      </style>

Breadcrumbs with light background

Show code

template
script
style

        
            
      <template>
        <section class="dark-font">
          <mdb-breadcrumb class="cyan lighten-4">
            <mdb-breadcrumb-item><a href="#" class="black-text">Home</a></mdb-breadcrumb-item>
          </mdb-breadcrumb>
          <mdb-breadcrumb class="pink lighten-4">
            <mdb-breadcrumb-item><a href="#" class="black-text">Home</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item><a href="#" class="black-text">Library</a></mdb-breadcrumb-item>
          </mdb-breadcrumb>
          <mdb-breadcrumb class="purple lighten-4 mb-0">
            <mdb-breadcrumb-item><a href="#" class="black-text">Home</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item><a href="#" class="black-text">Library</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item active>Data</mdb-breadcrumb-item>
          </mdb-breadcrumb>
        </section>
      </template>

        
            
      <script>
        import {
          mdbBreadcrumb,
          mdbBreadcrumbItem
        } from 'mdbvue';
        export default {
          name: 'Breadcrumb',
          components: {
            mdbBreadcrumb,
            mdbBreadcrumbItem
          }
        }
      </script>

        
            
      <style scoped>
        .dark-font .breadcrumb-item+.breadcrumb-item::before {
          color: #000;
        }

        .dark-font .breadcrumb-item.active {
          color: #455a64;
        }
      </style>

Breadcrumbs in uppercase

Show code

template
script

        
            
      <template>
        <section class="text-uppercase">
          <mdb-breadcrumb class="cyan lighten-4">
            <mdb-breadcrumb-item><a href="#">Home</a></mdb-breadcrumb-item>
          </mdb-breadcrumb>
          <mdb-breadcrumb class="cyan lighten-4">
            <mdb-breadcrumb-item><a href="#">Home</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item><a href="#">Library</a></mdb-breadcrumb-item>
          </mdb-breadcrumb>
          <mdb-breadcrumb class="cyan lighten-4 mb-0">
            <mdb-breadcrumb-item><a href="#">Home</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item><a href="#">Library</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item active>Data</mdb-breadcrumb-item>
          </mdb-breadcrumb>
        </section>
      </template>

        
            
      <script>
        import {
          mdbBreadcrumb,
          mdbBreadcrumbItem
        } from 'mdbvue';
        export default {
          name: 'Breadcrumb',
          components: {
            mdbBreadcrumb,
            mdbBreadcrumbItem
          }
        }
      </script>

Breadcrumbs with a bold font

Show code

template
script

        
            
      <template>
        <section class="font-weight-bold text-uppercase">
          <mdb-breadcrumb>
            <mdb-breadcrumb-item><a href="#">Home</a></mdb-breadcrumb-item>
          </mdb-breadcrumb>
          <mdb-breadcrumb>
            <mdb-breadcrumb-item><a href="#">Home</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item><a href="#">Library</a></mdb-breadcrumb-item>
          </mdb-breadcrumb>
          <mdb-breadcrumb class="mb-0">
            <mdb-breadcrumb-item><a href="#">Home</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item><a href="#">Library</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item active>Data</mdb-breadcrumb-item>
          </mdb-breadcrumb>
        </section>
      </template>

        
            
      <script>
        import {
          mdbBreadcrumb,
          mdbBreadcrumbItem
        } from 'mdbvue';
        export default {
          name: 'Breadcrumb',
          components: {
            mdbBreadcrumb,
            mdbBreadcrumbItem
          }
        }
      </script>

Breadcrumbs with icons

Show code

template
script
style

        
            
      <template>
        <section>
          <mdb-breadcrumb class="breadcrumb-with-mdb-icon">
            <mdb-breadcrumb-item><a href="#">Home</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item><a href="#">Library</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item>Data</mdb-breadcrumb-item>
          </mdb-breadcrumb>
        </section>
      </template>

        
            
      <script>
        import {
          mdbBreadcrumb,
          mdbBreadcrumbItem
        } from 'mdbvue';
        export default {
          name: 'Breadcrumb',
          components: {
            mdbBreadcrumb,
            mdbBreadcrumbItem
          }
        }
      </script>

        
            
      <style scoped>
        .breadcrumb-with-mdb-icon .breadcrumb-item+.breadcrumb-item::before {
          font-family: "Font Awesome 5 Brands";
          font-weight: 900;
          content: "\f8ca";
        }
      </style>

Breadcrumbs with arrows

Show code

template
script
style

        
            
      <template>
        <section>
          <mdb-breadcrumb class="breadcrumb-with-arrows">
            <mdb-breadcrumb-item><a href="#">Home</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item><a href="#">Library</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item>Data</mdb-breadcrumb-item>
          </mdb-breadcrumb>
          <mdb-breadcrumb class="breadcrumb-with-double-arrows mb-0">
            <mdb-breadcrumb-item><a href="#">Home</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item><a href="#">Library</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item>Data</mdb-breadcrumb-item>
          </mdb-breadcrumb>
        </section>
      </template>

        
            
      <script>
        import {
          mdbBreadcrumb,
          mdbBreadcrumbItem
        } from 'mdbvue';
        export default {
          name: 'Breadcrumb',
          components: {
            mdbBreadcrumb,
            mdbBreadcrumbItem
          }
        }
      </script>

        
            
      <style scoped>
        .breadcrumb-with-arrows .breadcrumb-item+.breadcrumb-item::before {
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          content: "\f0da";
        }

        .breadcrumb-with-double-arrows .breadcrumb-item+.breadcrumb-item::before {
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          content: "\f101";
        }
      </style>

Breadcrumbs with a hamburger button

Show code

template
script
style

        
            
      <template>
        <nav class="navbar navbar-expand-md navbar-dark indigo">
          <div class="float-left">
            <a class="white-text button-collapse" href="#!"><i class="fas fa-bars"></i></a>
          </div>
          <mdb-breadcrumb class="mb-1 indigo mr-auto">
            <mdb-breadcrumb-item><a href="#" class="text-white">Home</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item active>Library</mdb-breadcrumb-item>
          </mdb-breadcrumb>
          <form class="form-inline md-form m-0">
            <input class="form-control m-0 p-1 text-white" type="text" placeholder="Search" aria-label="Search">
          </form>
        </nav>
      </template>

        
            
      <script>
        import {
          mdbBreadcrumb,
          mdbBreadcrumbItem
        } from 'mdbvue';
        export default {
          name: 'Breadcrumb',
          components: {
            mdbBreadcrumb,
            mdbBreadcrumbItem
          }
        }
      </script>

        
            
      <style scoped>
        ::placeholder {
          color: #cfd8dc;
        }
      </style>

Breadcrumbs with a logo

Show code

template
script

        
            
      <template>
        <nav class="navbar navbar-expand-md navbar-dark indigo">
          <a class="navbar-brand" href="#!">
            <img src="https://mdbootstrap.com/img/logo/mdb-transparent.webp" height="30" alt="MDB logo">
          </a>
          <mdb-breadcrumb class="mb-1 indigo mr-auto">
            <mdb-breadcrumb-item><a href="#" class="text-white">Layout</a></mdb-breadcrumb-item>
            <mdb-breadcrumb-item active>Grid Usage</mdb-breadcrumb-item>
          </mdb-breadcrumb>
        </nav>
      </template>

        
            
      <script>
        import {
          mdbBreadcrumb,
          mdbBreadcrumbItem
        } from 'mdbvue';
        export default {
          name: 'Breadcrumb',
          components: {
            mdbBreadcrumb,
            mdbBreadcrumbItem
          }
        }
      </script>

Vue Bootstrap Breadcrumb - API

In this section you will find advanced information about the Breadcrumb component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Imports

Show code

script

        
            
    <script>
      import {
        mdbBreadcrumb,
        mdbBreadcrumbItem
      } from 'mdbvue';
    </script>

API Reference: Breadcrumb Properties

The table below shows the configuration options of the mdbBreadcrumb component.

Name	Type	Default	Description	Example
`tag`	String	`ol`	Sets breadcrumb's wrapper tag	`<mdb-breadcrumb tag="ol" />`
`color`	String		Sets breadcrumb's nav color	`<mdb-breadcrumb color="primary" />`

API Reference: BreadcrumbItem Properties

The table below shows the configuration options of the mdbBreadcrumbItem component.

Name	Type	Default	Description	Example
`tag`	String	`li`	Sets breadcrumb's tag	`<mdb-breadcrumb-item tag="li" />`
`active`	Boolean	`false`	Active state for breadcrumb item	`<mdb-breadcrumb-item active />`