React Js Add Breadcrumb using React Bootstrap Tutorial

React js breadcrumb tutorial; This detailed guide will help you learn how to build a Breadcrumb component in React application using the React Bootstrap package.

A breadcrumb is a user interface component that spruces up the user experience of users. It is ideally a graphical control element commonly used as a navigational helper in web application pages.

The breadcrumb gives you the idea about the location, path, or on which page you are on the web application. You can easily keep track and have an awareness of the location or path of websites.

How to Create React Js Breadcrumb Component with Bootstrap

  • Step 1: Download React App
  • Step 2: Install React Bootstrap
  • Step 3: Implement Bootstrap Breadcrumb
  • Step 4: Add Breadcrumb Component in App Js
  • Step 5: Start React App

Download React App

In the initial step, we have to download the new react application.

You may type and execute the given command to generate the new react project.

npx create-react-app react-demo

Install React Bootstrap

We require Bootstrap and React Bootstrap package for creating UI components.

The best possible way to install bootstrap is through the npm registry.

npm install react-bootstrap@next bootstrap@5.1.1

Bootstrap CSS must be added into the src/App.js file, and it helps in integrating the UI components.

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

Implement Bootstrap Breadcrumb

We will first use the Breadcrumb class component to import the Breadcrumb module from the ‘react-bootstrap/Breadcrumb’ package.

Use the Breadcrumb tag as a wrapper of the breadcrumbs; you may use the Breadcrumb.Item directive to form the component.

Create components/ folder; in this folder, create a Breadcrumb.js file and add the given code into this file.

import React, { Component } from 'react';

import Breadcrumb from 'react-bootstrap/Breadcrumb';

export default class Breadcrumb extends Component {
  render() {
    return (
      <div class="container mt-5">
        <Breadcrumb>
          <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
          <Breadcrumb.Item href="#">
            Profile
          </Breadcrumb.Item>
          <Breadcrumb.Item active>User</Breadcrumb.Item>
        </Breadcrumb>        
      </div>
    )
  }
}

We showed you the primary example of a breadcrumb. Nevertheless, you check the documentation here and implement more features in it.

Add Breadcrumb Component in App Js

Next, add the breadcrumb component in the app component, this is the main component in react, and it works as the main container for other components.

Add given code in the src/App.js file.

import React from "react";

import 'bootstrap/dist/css/bootstrap.min.css';
import Breadcrumb from "./components/Breadcrumb"

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

Start React App

Eventually, in the final part of this guide, we have to start the React app.

Here is the command that you have to execute and invoke the development server.

npm start

If developing locally, you may use the given url to view the app.

http://localhost:3000

React Js Add Breadcrumb using React Bootstrap Tutorial

Summary

In this react js bootstrap example, we learned how to create a breadcrumb component in react app using the react-bootstrap package.

We, step by step, discussed how to build the presentation layer of the breadcrumb component, however not the complete functionally. Now, if you ever need this type of feature with the help of this guide, you may easily add crumbs or dynamically in react app.