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

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