How to Create Breadcrumb Component in React with Plain CSS ?

In ReactJS, we can create a Breadcrumb Component easily with Plain CSS. We have to make a new component with JSX code to get a basic HTML code for the Breadcrumb, and then we have to apply CSS effects to make some changes and make its appearance the best.

Prerequisites:

• NodeJS or NPM
• React JS
• CSS

Approach:

Step 1: Make an inline list of items that are to be included in the breadcrumb of the Navbar. The code for it is given below:

li {
   display:inline;
   padding: 10px 16px;  
   text-decoration:underline;
} 

Step 2: Styling the breadcrumb by adding some characters to separate the list items such as slash or comma etc. To do that we have to use the (::before) in CSS as given below:

li,li:before {
   padding: 8px;
   color: black;
   content:"/";
 }

Steps to Create the React Application And Installing Module:

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

npx create-react-app GFGHosting

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

cd GFGHosting

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file

import React from 'react'

function App() {
    return (
        <div className="App">
            <nav>
                <ol>
                    <li> Home </li>
                    <li> About </li>
                    <li> Services</li>
                </ol>
            </nav>
        </div>
    );
}

export default App;

ol {
    text-align: center;
    border: solid;
}

li {
    display: inline;
    padding: 10px 16px;
    text-decoration: underline;
}

li+li:before {
    padding: 8px;
    color: black;
    content: "/";
}

nav {
    background-color: lime;
    height: 20px;
    width: 100%;
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000