How to Create Breadcrumb Component in React with Plain CSS ?

In ReactJS, we can create a Breadcrumb Component easily with Plain CSS. Since we have to only make a new component with JSX code for getting 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.

ReactJS is a component-based web framework that is used to make reusable components in Frontend. Breadcrumbs are used to give an advanced Navbar which we can use in Frontend to make traversing our website interactive.

Approach: To make a breadcrumb, the basic CSS that we will require is shown below.

• 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;
  } 

  Padding is applied to make some gap between the items in the Navbar and text-decoration is used to make the text appear underlined.

• 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:"/";
   }

• Step 3: We can also set the background color and the border to make the look of our Breadcrumb nice.

Creating 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: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

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/, you will see the following output:

The breadcrumb is created