React Breadcrumb

React Breadcrumb - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

Basic example

See the following Bootstrap Breadcrumb examples

        
            
            import React from "react";
            import { MDBBreadcrumb, MDBBreadcrumbItem, MDBContainer } from "mdbreact";

            const BreadcrumbPage = () => {
              return (
                <MDBContainer>
                  <MDBBreadcrumb>
                    <MDBBreadcrumbItem active>Home</MDBBreadcrumbItem>
                  </MDBBreadcrumb>

                  <MDBBreadcrumb>
                    <MDBBreadcrumbItem>Home</MDBBreadcrumbItem>
                    <MDBBreadcrumbItem active>Library</MDBBreadcrumbItem>
                  </MDBBreadcrumb>

                  <MDBBreadcrumb>
                    <MDBBreadcrumbItem>Home</MDBBreadcrumbItem>
                    <MDBBreadcrumbItem>Library</MDBBreadcrumbItem>
                    <MDBBreadcrumbItem active>Data</MDBBreadcrumbItem>
                  </MDBBreadcrumb>
                </MDBContainer>
              );
            };

            export default BreadcrumbPage;

Breadcrumbs with dark background 

        
            
            import React from "react";
            import { MDBBreadcrumb, MDBBreadcrumbItem, MDBContainer } from "mdbreact";

            const BreadcrumbPage = () => {
              return (
                <MDBContainer>
                    <MDBBreadcrumb light color="default">
                      <MDBBreadcrumbItem active>Home</MDBBreadcrumbItem>
                    </MDBBreadcrumb>

                    <MDBBreadcrumb light color="primary">
                      <MDBBreadcrumbItem>Home</MDBBreadcrumbItem>
                      <MDBBreadcrumbItem active>Library</MDBBreadcrumbItem>
                    </MDBBreadcrumb>

                    <MDBBreadcrumb light color="secondary">
                      <MDBBreadcrumbItem>Home</MDBBreadcrumbItem>
                      <MDBBreadcrumbItem>Library</MDBBreadcrumbItem>
                      <MDBBreadcrumbItem active>Data</MDBBreadcrumbItem>
                    </MDBBreadcrumb>
                </MDBContainer>
              );
            };

            export default BreadcrumbPage;

Breadcrumbs with icons 

        
            
            import React from "react";
            import { MDBBreadcrumb, MDBBreadcrumbItem, MDBContainer } from "mdbreact";

            const BreadcrumbPage = () => {
              return (
                <MDBContainer>
                  <MDBBreadcrumb light color="pink lighten-4">
                    <MDBBreadcrumbItem iconRegular icon="star">Home</MDBBreadcrumbItem>
                  </MDBBreadcrumb>

                  <MDBBreadcrumb light color="pink lighten-3">
                    <MDBBreadcrumbItem iconRegular icon="star">Home</MDBBreadcrumbItem>
                    <MDBBreadcrumbItem iconRegular icon="star" active>Library</MDBBreadcrumbItem>
                  </MDBBreadcrumb>

                  <MDBBreadcrumb light color="pink lighten-2">
                    <MDBBreadcrumbItem iconRegular icon="star">Home</MDBBreadcrumbItem>
                    <MDBBreadcrumbItem iconRegular icon="star">Library</MDBBreadcrumbItem>
                    <MDBBreadcrumbItem iconRegular icon="star" active>Data</MDBBreadcrumbItem>
                  </MDBBreadcrumb>
                </MDBContainer>
              );
            };

            export default BreadcrumbPage;

React Breadcrumb - API

In this section you will find advanced information about the Breadcrumb component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Imports

        
            
          import React from 'react'; 
          import { MDBBreadcrumb, MDBBreadcrumbItem } from 'mdbreact';

API Reference: Breadcrumb Properties

The table below shows the configuration options of the MDBBreadcrumb component.

Name Type Default Description Example
bold Boolean false Sets breadcrumbs font-weight to bold <MDBBreadcrumb bold />
className String Adds custom classes <MDBBreadcrumb className="customClass" />
color String Sets breadcrumbs background color <MDBBreadcrumb color="indigo" />
light Boolean false Sets font color to white <MDBBreadcrumb light />
uppercase Boolean false Transforms breadcrumbs text to uppercase <MDBBreadcrumb uppercase />

API Reference: BreadcrumbItem Properties

The table below shows the configuration options of the MDBBreadcrumbItem component.

Name Type Default Description Example
active Boolean false Active state for breadcrumb item <MDBBreadcrumbItem active />
appendIcon Boolean false Moves icon to the right <MDBBreadcrumbItem appendIcon />
bold Boolean false Sets breadcrumbs font-weight to bold <MDBBreadcrumbItem bold />
className String Adds custom classes <MDBBreadcrumbItem className="customClass" />
icon String Adds font-awesome icon <MDBBreadcrumbItem icon="caret-right" />
iconBrand Boolean false Use this property to set brand icon (fab) <MDBBreadcrumbItem icon="twitter" iconBrand />
iconClassName String Adds custom classes to icon element <MDBBreadcrumbItem icon="envelope" iconClassName="customClass" />
iconLight Boolean false Use this property to set light icon (fal) <MDBBreadcrumbItem icon="twitter" iconLight />
iconRegular Boolean false Use this property to set regular icon (far) <MDBBreadcrumbItem icon="twitter" iconRegular />
iconSize String Sets icon size <MDBBreadcrumbItem icon="pencil-alt" size="5x" />

React Breadcrumb - examples & customization

Quickly get a project started with any of our examples.

Breadcrumbs with light background 

        
            
          import React from "react";
          import { MDBBreadcrumb, MDBBreadcrumbItem, MDBContainer } from "mdbreact";

          const BreadcrumbPage = props => {
            return (
              <MDBContainer>
                <MDBBreadcrumb color="cyan lighten-4">
                  <MDBBreadcrumbItem active>Home</MDBBreadcrumbItem>
                </MDBBreadcrumb>

                <MDBBreadcrumb  color="pink lighten-4">
                  <MDBBreadcrumbItem>Home</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem active>Library</MDBBreadcrumbItem>
                </MDBBreadcrumb>

                <MDBBreadcrumb color="purple lighten-4">
                  <MDBBreadcrumbItem>Home</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem>Library</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem active>Data</MDBBreadcrumbItem>
                </MDBBreadcrumb>
              </MDBContainer>
            );
          };

          export default BreadcrumbPage;

Breadcrumbs with uppercases 

        
            
          import React from "react";
          import { MDBBreadcrumb, MDBBreadcrumbItem, MDBContainer } from "mdbreact";

          const BreadcrumbPage = props => {
            return (
              <MDBContainer>
                <MDBBreadcrumb uppercase color="cyan lighten-4">
                  <MDBBreadcrumbItem active>Home</MDBBreadcrumbItem>
                </MDBBreadcrumb>

                <MDBBreadcrumb uppercase color="cyan lighten-4">
                  <MDBBreadcrumbItem>Home</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem active>Library</MDBBreadcrumbItem>
                </MDBBreadcrumb>

                <MDBBreadcrumb bold uppercase color="cyan lighten-4">
                  <MDBBreadcrumbItem>Home</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem>Library</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem active>Data</MDBBreadcrumbItem>
                </MDBBreadcrumb>
              </MDBContainer>
            );
          };

          export default BreadcrumbPage;

Breadcrumbs with a bold font 

        
            
          import React from "react";
          import { MDBBreadcrumb, MDBBreadcrumbItem, MDBContainer } from "mdbreact";

          const BreadcrumbPage = props => {
            return (
              <MDBContainer>
                <MDBBreadcrumb bold uppercase >
                  <MDBBreadcrumbItem active>Home</MDBBreadcrumbItem>
                </MDBBreadcrumb>

                <MDBBreadcrumb bold uppercase >
                  <MDBBreadcrumbItem>Home</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem active>Library</MDBBreadcrumbItem>
                </MDBBreadcrumb>

                <MDBBreadcrumb bold uppercase >
                  <MDBBreadcrumbItem>Home</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem>Library</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem active>Data</MDBBreadcrumbItem>
                </MDBBreadcrumb>
              </MDBContainer>
            );
          };

          export default BreadcrumbPage;

Breadcrumbs with arrows 

        
            
          import React from "react";
          import { MDBBreadcrumb, MDBBreadcrumbItem, MDBContainer } from "mdbreact";

          const BreadcrumbPage = props => {
            return (
              <MDBContainer>
                <MDBBreadcrumb color="indigo lighten-4">
                  <MDBBreadcrumbItem appendIcon icon="caret-right">Home</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem appendIcon icon="caret-right">Library</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem appendIcon active>Data</MDBBreadcrumbItem>
                </MDBBreadcrumb>

                <MDBBreadcrumb color="blue-grey lighten-4">
                  <MDBBreadcrumbItem appendIcon icon="angle-double-right">Home</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem appendIcon icon="angle-double-right">Library</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem appendIcon active>Data</MDBBreadcrumbItem>
                </MDBBreadcrumb>

                <MDBBreadcrumb color="purple lighten-4">
                  <MDBBreadcrumbItem appendIcon icon="angle-right">Home</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem appendIcon icon="angle-right">Library</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem appendIcon active>Data</MDBBreadcrumbItem>
                </MDBBreadcrumb>

                <MDBBreadcrumb color="red lighten-4">
                  <MDBBreadcrumbItem appendIcon icon="angle-double-left">Home</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem appendIcon icon="angle-double-left">Library</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem appendIcon active>Data</MDBBreadcrumbItem>
                </MDBBreadcrumb>

                <MDBBreadcrumb color="cyan lighten-4">
                  <MDBBreadcrumbItem appendIcon icon="angle-left">Home</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem appendIcon icon="angle-left">Library</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem appendIcon active>Data</MDBBreadcrumbItem>
                </MDBBreadcrumb>

                <MDBBreadcrumb color="amber lighten-4">
                  <MDBBreadcrumbItem appendIcon icon="caret-left">Home</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem appendIcon icon="caret-left">Library</MDBBreadcrumbItem>
                  <MDBBreadcrumbItem appendIcon active>Data</MDBBreadcrumbItem>
                </MDBBreadcrumb>
              </MDBContainer>
            );
          };

          export default BreadcrumbPage;

Breadcrumbs with hamburger button 

        
            
          import React from "react";
          import { MDBBreadcrumb, MDBBreadcrumbItem, MDBContainer, MDBNavbar, MDBNavbarNav, MDBNavItem } from "mdbreact";

          const BreadcrumbPage = props => {
            return (
              <MDBContainer>
                <MDBNavbar
                  color="indigo"
                  style={{ marginTop: "20px" }}
                  dark
                >
                  <span className="navbar-toggler-icon" />
                  <MDBNavbarNav left>
                    <MDBBreadcrumb color="indigo">
                      <MDBBreadcrumbItem>Home</MDBBreadcrumbItem>
                      <MDBBreadcrumbItem active>Library</MDBBreadcrumbItem>
                    </MDBBreadcrumb>
                  </MDBNavbarNav>
                  <MDBNavbarNav right>
                    <MDBNavItem>
                        <input
                          className="form-control form-control-sm ml-3 w-75"
                          type="text"
                          placeholder="Search"
                          aria-label="Search"
                        />
                    </MDBNavItem>
                  </MDBNavbarNav>
                </MDBNavbar>
              </MDBContainer>
            );
          };

          export default BreadcrumbPage;