Breadcrumbs

Vue Bootstrap 5 Breadcrumb component

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


Basic example


          <template>
            <nav aria-label="breadcrumb">
              <MDBBreadcrumb>
                <MDBBreadcrumbItem active>Home</MDBBreadcrumbItem>
              </MDBBreadcrumb>
            </nav>

            <nav aria-label="breadcrumb">
              <MDBBreadcrumb>
                <MDBBreadcrumbItem><a href="#">Home</a></MDBBreadcrumbItem>
                <MDBBreadcrumbItem active>
                  Library
                </MDBBreadcrumbItem>
              </MDBBreadcrumb>
            </nav>

            <nav aria-label="breadcrumb">
              <MDBBreadcrumb>
                <MDBBreadcrumbItem><a href="#">Home</a></MDBBreadcrumbItem>
                <MDBBreadcrumbItem><a href="#">Library</a></MDBBreadcrumbItem>
                <MDBBreadcrumbItem active>Data</MDBBreadcrumbItem>
              </MDBBreadcrumb>
            </nav>
          </template>
        

          <script>
            import { MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
  
            export default {
              components: {
               MDBBreadcrumb, 
               MDBBreadcrumbItem
              },
            };
          </script>
        

Breadcrumb in navbar

Very often breadcrumb is placed in the navbar.


          <template>
            <MDBNavbar expand="lg" light bg="light" container>
              <nav aria-label="breadcrumb">
                <MDBBreadcrumb>
                  <MDBBreadcrumbItem><a href="#">Home</a></MDBBreadcrumbItem>
                  <MDBBreadcrumbItem><a href="#">Library</a></MDBBreadcrumbItem>
                  <MDBBreadcrumbItem active>
                    <a href="#">Data</a>
                  </MDBBreadcrumbItem>
                </MDBBreadcrumb>
              </nav>
            </MDBNavbar>
          </template>
        

          <script>
            import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';

            export default {
              components: {
                MDBNavbar,
                MDBBreadcrumb,
                MDBBreadcrumbItem,
              },
            };
          </script>
        

Changing the separator

Separators are automatically added in CSS through ::before and content. They can be changed by changing $breadcrumb-divider, or through the $breadcrumb-divider Sass variable — and $breadcrumb-divider-flipper for its RTL counterpart, if needed. We default to our Sass varibale, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.


          <template>
            <MDBNavbar expand="lg" light bg="light" container>
              <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>'">
                <MDBBreadcrumb>
                  <MDBBreadcrumbItem><a href="#">Home</a></MDBBreadcrumbItem>
                  <MDBBreadcrumbItem active> Library </MDBBreadcrumbItem>
                </MDBBreadcrumb>
              </nav>
            </MDBNavbar>
          </template>
        

          <script>
            import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';

            export default {
              components: {
                MDBNavbar,
                MDBBreadcrumb,
                MDBBreadcrumbItem,
              },
            };
          </script>
        

When modifying via Sass, the quote function is needed to generate the quotes around a string, so if you want > as separator, you can use this:

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

It’s also possible to use an embedded SVG icon:


          <template>
            <MDBNavbar expand="lg" light bg="light" container>
              <nav
                aria-label="breadcrumb"
                style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);"
              >
                <MDBBreadcrumb>
                  <MDBBreadcrumbItem><a href="#">Home</a></MDBBreadcrumbItem>
                  <MDBBreadcrumbItem active>
                    Library
                  </MDBBreadcrumbItem>
                </MDBBreadcrumb>
              </nav>
            </MDBNavbar>
          </template>
        

          <script>
            import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem  } from 'mdb-vue-ui-kit';

            export default {
              components: {
                MDBNavbar, 
                MDBBreadcrumb, 
                MDBBreadcrumbItem                     
              },
            };
          </script>
        

The separator can be removed by setting --bs-breadcrumb-divider: ''; (empty strings in CSS custom properties counts as a value), or setting the Sass variable to $breadcrumb-divider to none:


            <template>
              <MDBNavbar expand="lg" light bg="light" container>
                <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: ''">
                  <MDBBreadcrumb>
                    <MDBBreadcrumbItem><a href="#">Home</a></MDBBreadcrumbItem>
                    <MDBBreadcrumbItem active>
                      Library
                    </MDBBreadcrumbItem>
                  </MDBBreadcrumb>
                </nav>
              </MDBNavbar>
            </template>
          

            <script>
              import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem  } from 'mdb-vue-ui-kit';
  
              export default {
                components: {
                  MDBNavbar, 
                  MDBBreadcrumb, 
                  MDBBreadcrumbItem                     
                },
              };
            </script>
          

            $breadcrumb-divider: none;
          

Accessibility

Since breadcrumbs provide a 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.

Breadcrumbs - API


Import


        <script>
          import { 
            MDBBreadcrumb,
            MDBBreadcrumbItem
          } from 'mdb-vue-ui-kit';
        </script>
      

Properties

MDBBreadcrumb

Name Type Default Description Example
tag String 'nav' Defines tag of the MDBBreadcrumb element <MDBBreadcrumb tag="section" />

MDBBreadcrumbItem

Name Type Default Description Example
tag String 'li' Defines tag of the MDBBreadcrumbItem element <MDBBreadcrumbItem tag="div" />
active Boolean false Add active class to element and aria-current="page" <MDBBreadcrumbItem active />
current String 'page' Change aria-current to element if active class is selected to true. Use ('page' | 'step' | 'location'). <MDBBreadcrumbItem active current="location" />