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 React.ComponentProps<any> '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 "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" | "body" | "muted" | "white" | "black-50" | "white-50" '' Add text color to all elements. <MDBBreadcrumb textColor="white" />
uppercase boolean false Change text to uppercase in MDBBreadcrumb <MDBBreadcrumb uppercase />
ref React.Ref<any> A reference to the MDBBreadcrumb <MDBBreadcrumb ref={someRef} />

MDBBreadcrumbItem

Name Type Default Description Example
tag React.ComponentProps<any> '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" />
ref React.Ref<any> A reference to the MDBBreadcrumbItem component <MDBBreadcrumbItem active ref={someRef} />