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 } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <nav className='navbar navbar-expand-lg navbar-light bg-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>
              </nav>
            );
          }
        

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
tag String 'nav' Defines tag of the MDBBreadcrumb element <MDBBreadcrumb tag="section" />
bold Boolean 'false' Add class bold to MDBBreadcrumb <MDBBreadcrumb bold />
className String '' Add custom class to MDBBreadcrumb <MDBBreadcrumb className="class" />
textColor String '' Add text color to all elements. <MDBBreadcrumb textColor="white" />
uppercase Boolean false Change text to uppercase in MDBBreadcrumb <MDBBreadcrumb uppercase />

MDBBreadcrumbItem

Name Type Default Description Example
tag String 'nav' Defines tag of the MDBBreadcrumbItem element <MDBBreadcrumbItem tag="section" />
className String '' Add custom class to MDBBreadcrumbItem <MDBBreadcrumbItem className="class" />
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" />