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 } 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>
                              <MDBNavbarLink className='me-3 me-lg-0'>
                                <MDBDropdownToggle tag='a' className='hidden-arrow'>
                                  <MDBIcon fas icon='bell' />
                                  <MDBBadge pill notification color='danger'>
                                    1
                                  </MDBBadge>
                                </MDBDropdownToggle>
                              </MDBNavbarLink>
                              <MDBDropdownMenu>
                                <MDBDropdownItem>
                                  <MDBDropdownLink href='#'>Some news</MDBDropdownLink>
                                </MDBDropdownItem>
                                <MDBDropdownItem>
                                  <MDBDropdownLink href='#'>Another news</MDBDropdownLink>
                                </MDBDropdownItem>
                                <MDBDropdownItem>
                                  <MDBDropdownLink href='#'>Something else</MDBDropdownLink>
                                </MDBDropdownItem>
                              </MDBDropdownMenu>
                            </MDBDropdown>
                          </MDBNavbarItem>
        
                          {/* Icon dropdown */}
                          <MDBNavbarItem>
                            <MDBDropdown>
                              <MDBNavbarLink className='me-3 me-lg-0'>
                                <MDBDropdownToggle tag='a' className='hidden-arrow'>
                                  <MDBIcon flag='united-kingdom' className='m-0' />
                                </MDBDropdownToggle>
                              </MDBNavbarLink>
                              <MDBDropdownMenu>
                                <MDBDropdownItem>
                                  <MDBDropdownLink>
                                    <MDBIcon flag='united-kingdom' />
                                    English
                                    <MDBIcon fas icon='check' color='success' className='ms-2' />
                                  </MDBDropdownLink>
                                </MDBDropdownItem>
                                <MDBDropdownItem>
                                  <MDBDropdownDivider></MDBDropdownDivider>
                                </MDBDropdownItem>
                                <MDBDropdownItem>
                                  <MDBDropdownLink>
                                    <MDBIcon flag='poland' />
                                    Polski
                                  </MDBDropdownLink>
                                </MDBDropdownItem>
                                <MDBDropdownItem>
                                  <MDBDropdownLink>
                                    <MDBIcon flag='china' />
                                    中文
                                  </MDBDropdownLink>
                                </MDBDropdownItem>
                                <MDBDropdownItem>
                                  <MDBDropdownLink>
                                    <MDBIcon flag='japan' />
                                    日本語
                                  </MDBDropdownLink>
                                </MDBDropdownItem>
                                <MDBDropdownItem>
                                  <MDBDropdownLink>
                                    <MDBIcon flag='germany' />
                                    Deutsch
                                  </MDBDropdownLink>
                                </MDBDropdownItem>
                                <MDBDropdownItem>
                                  <MDBDropdownLink>
                                    <MDBIcon flag='spain' />
                                    Español
                                  </MDBDropdownLink>
                                </MDBDropdownItem>
                                <MDBDropdownItem>
                                  <MDBDropdownLink>
                                    <MDBIcon flag='russia' />
                                    Русский
                                  </MDBDropdownLink>
                                </MDBDropdownItem>
                                <MDBDropdownItem>
                                  <MDBDropdownLink>
                                    <MDBIcon flag='portugal' />
                                    Português
                                  </MDBDropdownLink>
                                </MDBDropdownItem>
                              </MDBDropdownMenu>
                            </MDBDropdown>
                          </MDBNavbarItem>
        
                          {/* Avatar */}
                          <MDBNavbarItem>
                            <MDBDropdown>
                              <MDBNavbarLink className='d-flex align-items-center'>
                                <MDBDropdownToggle tag='a' className='hidden-arrow'>
                                  <img
                                    src='https://mdbootstrap.com/img/new/avatars/2.jpg'
                                    className='rounded-circle'
                                    height='22'
                                    alt='Avatar'
                                    loading='lazy'
                                  />
                                </MDBDropdownToggle>
                              </MDBNavbarLink>
                              <MDBDropdownMenu>
                                <MDBDropdownItem>
                                  <MDBDropdownLink href='#'>MyProfile</MDBDropdownLink>
                                </MDBDropdownItem>
                                <MDBDropdownItem>
                                  <MDBDropdownLink href='#'>Settings</MDBDropdownLink>
                                </MDBDropdownItem>
                                <MDBDropdownItem>
                                  <MDBDropdownLink href='#'>Logout</MDBDropdownLink>
                                </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} />