Breadcrumb

Some features in this component requires CDB React Pro package.Clickhereto try it out.

React Bootstrap 5 Breadcrumb

React Bootstrap 5 Breadcrumb shows where a user is on a website or in a Web application. It is a navigational tool that allows users to trace their journeys and keep track of where they are on the website.

Importing the React Bootstrap 5 Breadcrumb component

You can start by importing 'CDBBreadcrumb' into your project to use the React Bootstrap 5 Breadcrumb component.

import { CDBBreadcrumb } from "cdbreact";

Default BreadCrumb

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

Pro Component

We may nest icons in the React Bootstrap 5 Breadcrumb component so that our breadcrumbs can have icons. To accomplish this, we append our 'CDBIcon' component to our 'CDBBreadcrumb' component.

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

Pro Component

This React Bootstrap 5 Breadcrumb is a pro component with colors. You can use any color to build this breadcrumbs. you can check out the ones we have below.

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 Reference: Contrast React Bootstrap 5 Breadcrumb Props

The props you get to use with the Contrast React Bootstrap 5 Breadcrumb component will be expanded on in this section. You'll learn what these props are for, how to utilize them in your code, and what their default values are.

Other CDBBreadcrumb component props are included in the table below.

Name	Type	Default	Description	Example
className	String	Adds custom classes	Adds custom classes	<CDBBreadcrumb className="myClass" ... />
color	String	primary	Determines breadcrumb background color, accepts CDB predefined color classes: `primary` `secondary` `success` `danger` `warning` `info` `light` `dark`	<CDBBreadcrumb color="primary" ... />
light	Boolean	false	Sets font color to white	<CDBBreadcrumb color="dark" light .../>
uppercase	Boolean	false	Transforms breadcrumbs text to uppercase	<CDBBreadcrumb color="secondary" uppercase .../>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Checkbox

Card