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;