Breadcrumb

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

Examples

See the following Bootstrap Breadcrumb examples

import React from "react";
import { CDBBreadcrumb, CDBContainer } from "cdbreact";
export const Breadcrumb = () => {
  return (
    <CDBContainer>
            <CDBBreadcrumb color="none">
              <li className="breadcrumb-item" >Home</li>
              <li className="breadcrumb-item">Library</li>
              <li className="breadcrumb-item active">Data</li>
            </CDBBreadcrumb>
            <CDBBreadcrumb color="none">
              <li className="breadcrumb-item">Home</li>
              <li className="breadcrumb-item active">Library</li>
            </CDBBreadcrumb>
            <CDBBreadcrumb color="none">
              <li className="breadcrumb-item active">Home</li>
            </CDBBreadcrumb>
    </CDBContainer>
  );
};

Breadcrumb with Icons

import React from "react";
import { CDBBreadcrumb, CDBIcon, CDBContainer } from "cdbreact";
export const Breadcrumb = () => {
  return (
    <CDBContainer>
            <CDBBreadcrumb color="none" className="align-items-center">
              <li className="breadcrumb-item" ><CDBLink className="p-0" to="#">Home</CDBLink></li>
              <CDBIcon className="mx-2 text-muted" fas icon="angle-double-right"/>
              <li className="breadcrumb-item"><CDBLink className="p-0" to="#">Library</CDBLink></li>
              <CDBIcon className="mx-2 text-muted" fas icon="angle-double-right"/>
              <li className="breadcrumb-item active">Data</li>
            </CDBBreadcrumb>
            <CDBBreadcrumb color="none" className="align-items-center">
              <li className="breadcrumb-item"><CDBLink className="p-0" to="#">Home</CDBLink></li>
              <CDBIcon className="mx-2 text-muted" fas icon="angle-double-right"/>
              <li className="breadcrumb-item active">Library</li>
            </CDBBreadcrumb>
            <CDBBreadcrumb color="none">
              <li className="breadcrumb-item active">Home</li>
            </CDBBreadcrumb>
    </CDBContainer>
  );
};

Breadcrumb with colors

import React from "react";
import { CDBBreadcrumb, CDBIcon, CDBContainer } from "cdbreact";
export const Breadcrumb = () => {
  return (
    <CDBContainer>
            <CDBBreadcrumb color="dark" className="align-items-center text-white">
              <li className="breadcrumb-item" ><CDBLink className="p-0 text-white" to="#">Home</CDBLink></li>
              <CDBIcon className="mx-2 text-muted" fas icon="angle-double-right"/>
              <li className="breadcrumb-item"><CDBLink className="p-0 text-white" to="#">Library</CDBLink></li>
              <CDBIcon className="mx-2 text-muted" fas icon="angle-double-right"/>
              <li className="breadcrumb-item">Data</li>
            </CDBBreadcrumb>
            <CDBBreadcrumb className="align-items-center">
              <li className="breadcrumb-item"><CDBLink className="p-0 text-white" to="#">Home</CDBLink></li>
              <CDBIcon className="mx-2 text-muted" fas icon="angle-double-right"/>
              <li className="breadcrumb-item">Library</li>
            </CDBBreadcrumb>
            <CDBBreadcrumb color="info">
              <li className="breadcrumb-item">Home</li>
            </CDBBreadcrumb>
    </CDBContainer>
  );
};

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.

Contrast Breadcrumb Import Statement

You need to import the Contrast Breadcrumb component first before using it. If icons are needed, you will also need to import the Contrast Icon component.

import { CDBBreadcrumb, CDBIcon } from "cdbreact";

API Reference: Contrast Breadcrumb Properties

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