Edit these docs

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.



        <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: 



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

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



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

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



        $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



        <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



        <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



        <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



        <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



        <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



        <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



        <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>

      



        <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>
Edit these docs

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


      import { mdbBreadcrumb, mdbBreadcrumbItem } from 'mdbvue';

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 />