Rate this docs

React Bootstrap Breadcrumb

React Breadcrumb - Bootstrap 4 & Material Design

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, Container } from "mdbreact";

          const BreadcrumbPage = props => {
            return (
              <Container>
                <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>
              </Container>
            );
          };

          export default BreadcrumbPage;

      

Breadcrumbs with dark background



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

          const BreadcrumbPage = props => {
            return (
              <Container>
                  <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>
              </Container>
            );
          };

          export default BreadcrumbPage;

      

Breadcrumbs with icons



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

          const BreadcrumbPage = props => {
            return (
              <Container>
                <MDBBreadcrumb light color="pink lighten-4">
                  <MDBBreadcrumbItem icon="star-o">Home</MDBBreadcrumbItem>
                </MDBBreadcrumb>

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

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

          export default BreadcrumbPage;

      

React Bootstrap 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" />
iconClassName String Adds custom classes to icon element <MDBBreadcrumbItem iconClassName="customClass" />

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, Container } from "mdbreact";

            const BreadcrumbPage = props => {
              return (
                <Container>
                  <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>
                </Container>
              );
            };

            export default BreadcrumbPage;

        

Breadcrumbs with uppercases



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

            const BreadcrumbPage = props => {
              return (
                <Container>
                  <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>
                </Container>
              );
            };

            export default BreadcrumbPage;

        

Breadcrumbs with a bold font



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

            const BreadcrumbPage = props => {
              return (
                <Container>
                  <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>
                </Container>
              );
            };

            export default BreadcrumbPage;

        

Breadcrumbs with arrows



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

            const BreadcrumbPage = props => {
              return (
                <Container>
                  <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>
                </Container>
              );
            };

            export default BreadcrumbPage;

        

Breadcrumbs with hamburger button



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

            const BreadcrumbPage = props => {
              return (
                <Container>
                  <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>
                </Container>
              );
            };

            export default BreadcrumbPage;