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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
            </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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
            </script>

Breadcrumb in header

If there is not enough space in navbar, consider placing breadcrumbs in a composition like this below.

Dashboard

        
            
          <template>
            <MDBNavbar expand="lg" light bg="light" container>
              <MDBRow class="g-3 ms-3 align-items-center">
                <MDBInput
                  id="navbarSupportedContent"
                  wrapperClass="col-auto"
                  label='Search (ctrl + "/" to focus)'
                />
                <MDBCol auto>
                  <a class="ms-3" href="#!" role="button" style="color: #616161">
                    <MDBIcon icon="search"></MDBIcon>
                  </a>
                </MDBCol>
              </MDBRow>
              <MDBRow align-items-start bg-light mb-3>
                <MDBCol>
                  <MDBIcon icon="bell" />
                  <MDBBadge notification color="danger" pill>1</MDBBadge>
                </MDBCol>
                <MDBCol class="ps-1 pe-1">
                  <MDBIcon class="flag flag-united-kingdom" />
                </MDBCol>
                <MDBCol class="ps-1 pe-1">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"
                    class="rounded-circle"
                    height="22"
                    alt=""
                    loading="lazy"
                  />
                </MDBCol>
              </MDBRow>
            </MDBNavbar>
            <MDBContainer class="p-5 bg-light mb-4">
              <h1>Dashboard</h1>
              <nav aria-label="breadcrumb" class="d-flex">
                <MDBBreadcrumb>
                  <MDBBreadcrumbItem>
                    <a class="text-reset" href="#">Home</a>
                  </MDBBreadcrumbItem>
                  <MDBBreadcrumbItem>
                    <a class="text-reset" href="#">Library</a>
                  </MDBBreadcrumbItem>
                  <MDBBreadcrumbItem active>
                    <a class="text-reset" href="#"><u>Dashboard</u></a>
                  </MDBBreadcrumbItem>
                </MDBBreadcrumb>
              </nav>
            </MDBContainer>
          </template>
          
        
    
        
            
            <script>
              import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem,
                MDBContainer, MDBRow, MDBInput, MDBCol, MDBIcon, MDBBadge } from 'mdb-vue-ui-kit';

                export default {
                  components: {
                    MDBNavbar,
                    MDBBreadcrumb,
                    MDBBreadcrumbItem,
                    MDBContainer,
                    MDBRow,
                    MDBInput,
                    MDBCol,
                    MDBIcon,
                    MDBBadge,
                  },
                };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import {
                MDBNavbar,
                MDBBreadcrumb,
                MDBBreadcrumbItem,
                MDBContainer,
                MDBRow,
                MDBInput,
                MDBCol,
                MDBIcon,
                MDBBadge,
              } from 'mdb-vue-ui-kit';
            </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-flipped 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="--mdb-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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
            </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="--mdb-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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
            </script>

The separator can be removed by setting --mdb-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="--mdb-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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
            </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" />

CSS variables

As part of MDB’s evolving CSS variables approach, breadcrumb now uses local CSS variables on .breadcrumb for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. 

        
            
        // .breadcrumb
        --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
        --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
        --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
        @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
        --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
        --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
        --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
        --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
        --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
        
        // .navbar
        //.breadcrumb
        --#{$prefix}breadcrumb-item-color: #{$breadcrumb-item-color};
        --#{$prefix}breadcrumb-item-hover-color: #{$breadcrumb-item-hover-color};
        --#{$prefix}breadcrumb-item-before-color: #{$breadcrumb-item-before-color};
        --#{$prefix}breadcrumb-item-transition: #{$breadcrumb-item-transition};

SCSS variables

        
            
        $breadcrumb-font-size: null;
        $breadcrumb-padding-y: 0;
        $breadcrumb-padding-x: 0;
        $breadcrumb-item-padding-x: 0.5rem;
        $breadcrumb-margin-bottom: 1rem;
        $breadcrumb-bg: null;
        $breadcrumb-divider-color: $gray-600;
        $breadcrumb-active-color: $gray-600;
        $breadcrumb-divider: quote('/');
        $breadcrumb-divider-flipped: $breadcrumb-divider;
        $breadcrumb-border-radius: null;

        $breadcrumb-item-color: rgba(0, 0, 0, 0.55);
        $breadcrumb-item-transition: color 0.15s ease-in-out;
        $breadcrumb-item-hover-color: rgba(0, 0, 0, 0.7);
        $breadcrumb-item-before-color: $breadcrumb-item-color;