如何使用纯 CSS 在 React 中创建面包屑组件？

在 ReactJS 中，我们可以使用纯 CSS 轻松创建面包屑组件。由于我们只需要使用 JSX 代码制作一个新组件来获取面包屑的基本 HTML 代码，然后我们必须应用 CSS 效果进行一些更改并使其外观最佳。

ReactJS 是一个基于组件的 Web 框架，用于在前端制作可重用的组件。面包屑用于提供高级导航栏，我们可以在前端使用它来使遍历我们的网站具有交互性。

方法：要制作面包屑，我们需要的基本 CSS 如下所示。

第 1 步：制作要包含在导航栏面包屑中的项目的内联列表。它的代码如下：
```
li {
   display:inline;
   padding: 10px 16px;  
   text-decoration:underline;
} 
```
填充用于在导航栏中的项目之间产生一些间隙，文本装饰用于使文本显示为下划线。
第 2 步：通过添加一些字符来分隔列表项（例如斜杠或逗号等）来设置面包屑的样式。为此，我们必须在 CSS 中使用 (::before)，如下所示：
```
li,li:before {
   padding: 8px;
   color: black;
   content:"/";
 }
```
第三步：我们还可以设置背景颜色和边框，让我们的面包屑看起来更漂亮。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app GFGHosting
```
第 2 步：创建项目文件夹后，即 GFGHosting ，使用以下命令移动到该文件夹：
```
cd GFGHosting
```

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react'
  
function App() {
  return (
    
      
        
           Home 
           About 
           Services
        
      
    
  );
}
  
export default App;

index.css

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

索引.css

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

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

面包屑已创建