React-Bootstrap Breadcrumb API

Last Updated : 28 Apr, 2025

React-bootstrap is a frontend Stylesheet library. It replaces the Bootstrap JavaScript into completely a react component.It creates a seamless front-end development experience.Breadcrumb helps to display the current page location within a navigational hierarchy.

Syntax:

<Breadcrumb>  </Breadcrumb>

React Bootstrap Breadcrumb props:

bsPrefix: The changes the component's CSS base class name and modifier class names prefix.
label: It adds label for the component.
listProps: It helps to add a list of additional props.
as: It helps to customize the element, changes the element type.

Steps to create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the React JS application, Install the required module using the following command:

npm install react-bootstrap bootstrap

Project Structure:

Screenshot30

Example 1: In this example we will see how to add a breadcrumb component in the App.js file

JavaScript

import Breadcrumb from 'react-bootstrap/Breadcrumb';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
    return (
        <div className="App text-center">
            <h3>React-Bootstrap Breadcrumb API</h3>

            <Breadcrumb label="breadcrumb-1">
                <Breadcrumb.Item href="https://www.geeksforgeeks.org/">
                    GeeksforGeeks
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                    Articles
                </Breadcrumb.Item>
                <Breadcrumb.Item>    React-Bootstrap</Breadcrumb.Item>
                <Breadcrumb.Item active> Breadcrumb API</Breadcrumb.Item>

            </Breadcrumb>

        </div>
    );
}

export default App;

Output

20231007_195854

Example 2: In this example we will see how the breadcrumb component can display the properties of another element using the as prop in the App.js file

JavaScript

import Breadcrumb from "react-bootstrap/Breadcrumb";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
    return (
        <div className="App text-center">
            <h3>React-Bootstrap Breadcrumb API</h3>

            <Breadcrumb as={"h5"}>
                <Breadcrumb.Item href="https://www.geeksforgeeks.org/">
                    GeeksforGeeks
                </Breadcrumb.Item>
                <Breadcrumb.Item>Courses</Breadcrumb.Item>
                <Breadcrumb.Item> Students</Breadcrumb.Item>
                <Breadcrumb.Item active>
                    Interview Preparation Course
                </Breadcrumb.Item>
            </Breadcrumb>
        </div>
    );
}

export default App;