Breadcrumb

React Bootstrap 5 Breadcrumb component

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

Basic example

        
            
          import React from 'react';
          import { MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBreadcrumb>
                  <MDBBreadcrumbItem>Home</MDBBreadcrumbItem>
                </MDBBreadcrumb>
    
                <MDBBreadcrumb>
                  <MDBBreadcrumbItem>
                    <a href='#'>Home</a>
                  </MDBBreadcrumbItem>
                  <MDBBreadcrumbItem active>Library</MDBBreadcrumbItem>
                </MDBBreadcrumb>

                <MDBBreadcrumb>
                  <MDBBreadcrumbItem>
                    <a href='#'>Home</a>
                  </MDBBreadcrumbItem>
                  <MDBBreadcrumbItem>
                    <a href="#">Library</a>
                  </MDBBreadcrumbItem>
                  <MDBBreadcrumbItem active>Data</MDBBreadcrumbItem>
                </MDBBreadcrumb>
              </>
            );
          }

Breadcrumb in navbar

Very often breadcrumb is placed in the navbar. 

        
            
          import React from 'react';
          import { MDBBreadcrumb, MDBBreadcrumbItem, MDBContainer, MDBNavbar } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBNavbar expand='lg' light bgColor='light'>
                <MDBContainer fluid>
                  <MDBBreadcrumb>
                    <MDBBreadcrumbItem>
                      <a href='#'>Home</a>
                    </MDBBreadcrumbItem>
                    <MDBBreadcrumbItem>
                      <a href='#'>Library</a>
                    </MDBBreadcrumbItem>
                    <MDBBreadcrumbItem active>
                      <a href='#'>Data</a>
                    </MDBBreadcrumbItem>
                  </MDBBreadcrumb>
                </MDBContainer>
              </MDBNavbar>
            );
          }

Breadcrumb in header

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

Dashboard

        
            
              import React from 'react';
              import {
                MDBBreadcrumb,
                MDBBreadcrumbItem,
                MDBContainer,
                MDBNavbar,
                MDBInputGroup,
                MDBIcon,
                MDBInput,
                MDBNavbarLink,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
                MDBDropdownItem,
                MDBBadge,
              } from 'mdb-react-ui-kit';

              export default function App() {
                return (
                  <header>
                    {/* Main Navigation */}
                    <MDBNavbar expand='lg' light className='bg-white'>
                      {/* Container wrapper */}
                      <MDBContainer fluid>
                        {/* Search form */}
                        <MDBInputGroup textAfter={<MDBIcon fas icon='search' />} noBorder>
                          <MDBInput
                            autoComplete='off'
                            className='active'
                            type='search'
                            placeholder='Search (ctrl + "/" to focus)'
                            style={{ minWidth: '225px' }}
                          />
                        </MDBInputGroup>

                        {/* Right links */}
                        <MDBNavbarNav className='d-flex flex-row' right fullWidth={false}>
                          {/* Notification dropdown */}
                          <MDBNavbarItem>
                            <MDBDropdown>
                              <MDBDropdownToggle tag='a' className='hidden-arrow me-3 me-lg-0 nav-link' style={{ cursor: 'pointer' }}>
                                <MDBIcon fas icon='bell' />
                                <MDBBadge pill notification color='danger'>
                                  1
                                </MDBBadge>
                              </MDBDropdownToggle>
                              <MDBDropdownMenu>
                                <MDBDropdownItem link>Some news</MDBDropdownItem>
                                <MDBDropdownItem link>Another news</MDBDropdownItem>
                                <MDBDropdownItem link>Something else</MDBDropdownItem>
                              </MDBDropdownMenu>
                            </MDBDropdown>
                          </MDBNavbarItem>

                          {/* Icon dropdown */}
                          <MDBNavbarItem>
                            <MDBDropdown>
                              <MDBDropdownToggle tag='a' className='hidden-arrow me-3 me-lg-0 nav-link'>
                                <MDBIcon flag='united-kingdom' className='m-0' />
                              </MDBDropdownToggle>
                              <MDBDropdownMenu>
                                <MDBDropdownItem link>
                                  <MDBIcon flag='united-kingdom' />
                                  English
                                  <MDBIcon fas icon='check' color='success' className='ms-2' />
                                </MDBDropdownItem>
                                <MDBDropdownItem>{/* <MDBDropdownDivider></MDBDropdownDivider> */}</MDBDropdownItem>
                                <MDBDropdownItem link>
                                  <MDBIcon flag='poland' />
                                  Polski
                                </MDBDropdownItem>
                                <MDBDropdownItem link>
                                  <MDBIcon flag='china' />
                                  中文
                                </MDBDropdownItem>
                                <MDBDropdownItem link>
                                  <MDBIcon flag='japan' />
                                  日本語
                                </MDBDropdownItem>
                                <MDBDropdownItem link>
                                  <MDBIcon flag='germany' />
                                  Deutsch
                                </MDBDropdownItem>
                                <MDBDropdownItem link>
                                  <MDBIcon flag='spain' />
                                  Español
                                </MDBDropdownItem>
                                <MDBDropdownItem link>
                                  <MDBIcon flag='russia' />
                                  Русский
                                </MDBDropdownItem>
                                <MDBDropdownItem link>
                                  <MDBIcon flag='portugal' />
                                  Português
                                </MDBDropdownItem>
                              </MDBDropdownMenu>
                            </MDBDropdown>
                          </MDBNavbarItem>

                          {/* Avatar */}
                          <MDBNavbarItem>
                            <MDBDropdown>
                              <MDBDropdownToggle tag='a' className='hidden-arrow d-flex align-items-center nav-link'>
                                <img
                                  src='https://mdbootstrap.com/img/new/avatars/2.jpg'
                                  className='rounded-circle'
                                  height='22'
                                  alt='Avatar'
                                  loading='lazy'
                                />
                              </MDBDropdownToggle>
                              <MDBDropdownMenu>
                                <MDBDropdownItem link>MyProfile</MDBDropdownItem>
                                <MDBDropdownItem link>Settings</MDBDropdownItem>
                                <MDBDropdownItem link>Logout</MDBDropdownItem>
                              </MDBDropdownMenu>
                            </MDBDropdown>
                          </MDBNavbarItem>
                        </MDBNavbarNav>
                      </MDBContainer>
                    </MDBNavbar>

                    {/* Heading */}
                    <div className='p-5 bg-light mb-4'>
                      <h1>Dashboard</h1>
                      {/* Breadcrumb */}
                      <MDBContainer fluid>
                        <MDBBreadcrumb bold>
                          <MDBBreadcrumbItem>
                            <a href='' className='text-reset'>
                              Home
                            </a>
                          </MDBBreadcrumbItem>
                          <MDBBreadcrumbItem>
                            <a href='' className='text-reset'>
                              Analytics
                            </a>
                          </MDBBreadcrumbItem>
                          <MDBBreadcrumbItem>
                            <a href='' className='text-reset'>
                              <u>Dashboard</u>
                            </a>
                          </MDBBreadcrumbItem>
                        </MDBBreadcrumb>
                      </MDBContainer>
                    </div>
                  </header>
                );
              }

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 separator, you can use this: 

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

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

        
            
            $breadcrumb-divider: url("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");

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

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

Breadcrumb - API

Import

        
            
          import { MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-react-ui-kit';

Properties

MDBBreadcrumb

Name Type Default Description Example
bold boolean 'false' Add class bold to MDBBreadcrumb <MDBBreadcrumb bold />
color "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" | "body" | "muted" | "white" | "black-50" | "white-50" '' Add text color to all elements. <MDBBreadcrumb color="secondary" />
ref React.Ref<any> A reference to the MDBBreadcrumb <MDBBreadcrumb ref={someRef} />
tag React.ComponentProps<any> 'nav' Defines tag of the MDBBreadcrumb element <MDBBreadcrumb tag="section" />
uppercase boolean false Change text to uppercase in MDBBreadcrumb <MDBBreadcrumb uppercase />

MDBBreadcrumbItem

Name Type Default Description Example
tag React.ComponentProps<any> 'nav' Defines tag of the MDBBreadcrumbItem element <MDBBreadcrumbItem tag="section" />
active boolean false Add active class to element and aria-current="page" <MDBBreadcrumbItem active />
current 'page' | 'step' | 'location' 'page' Change aria-current to element if active class is selected to true. <MDBBreadcrumbItem active current="location" />
ref React.Ref<any> A reference to the MDBBreadcrumbItem component <MDBBreadcrumbItem active ref={someRef} />

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;