How to Create Breadcrumbs in React 18 using Bootstrap

Last Updated on March 4, 2024 by Digamber in React JS

React JS Breadcrumbs tutorial; UI, aka user interface, is not just limited to colors, typography, layout, or design.

Instead, it is more than that. The best design solves the problem, and the best design is made of various small UI components with the primary idea to help users consume your product.

Today, we will teach you how to create the breadcrumbs component in React js application.

To add the breadcrumb component, we will use the React Bootstrap library.

Hence, we won’t have to create the breadcrumbs from scratch. Instead, we will take the short way with utmost profoundness.

Let us understand what breadcrumbs are and why breadcrumbs are essential.

Breadcrumbs are secondary navigation and help us know about the location of a page in an application.

In large sites, you tend to navigate deeper into the sites often.

You see a horizontal stack of links categories-wise that secondary navigations are there to give you an idea about your location.

React Js Bootstrap Breadcrumb Component Example

• Step 1: Create React Project
• Step 2: Add React Bootstrap
• Step 3: Create Breadcrumb Component
• Step 4: Register Component in App Js
• Step 5: Run Development Server

Create React Project

Installing a new react app doesn’t take much time unless you have set up the Node and NPM package manager on your system.

npx create-react-app reactra

Get into the ‘reactra’ project.

cd reactra

Add React Bootstrap

Next, head over to the console, use the given below command to install the React bootstrap package.

npm install react-bootstrap@next bootstrap@5.1.1 --legacy-peer-deps

To embed the Bootstrap components in react app, you must include the Bootstrap CSS in the src/App.js file.

import 'bootstrap/dist/css/bootstrap.min.css';

Create Breadcrumb Component

Now, create the breadcrumb component, make sure to create components/Breadcrumb.js folder and file, also paste the given below code into the file.

import React, { Component } from 'react';
import Breadcrumb from 'react-bootstrap/Breadcrumb';


class BreadcrumbComponent extends Component {
  render() {
    return (
      <div class="container">
        <Breadcrumb>
          <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
          <Breadcrumb.Item href="#">Products</Breadcrumb.Item>
          <Breadcrumb.Item active>Shoes</Breadcrumb.Item>
        </Breadcrumb>        
      </div>
    )
  }
}

export default BreadcrumbComponent;

Register Component in App Js

Now that everything is ready, open the App.js copy the given below code and paste into the file.

import React from "react";

import 'bootstrap/dist/css/bootstrap.min.css';


export default function App() {
  return (
     <>
     </>
  );
}

Run Development Server

In order to view the app, you must start the react app. You can do it by running the suggested command.

npm start

Conclusion

Breadcrumbs are not a standard navigational feature, but they also play a huge role in uplifting the user experience for your website and makes your React sites’ SEO strong.

Therefore, we showed you how to add the static breadcrumb component; however, you can pass the dynamic values and create the dynamic breadcrumbs component in React.