¿Cómo crear un componente Breadcrumb en React con Plain CSS?

En ReactJS, podemos crear un componente Breadcrumb fácilmente con Plain CSS. Ya que solo tenemos que hacer un nuevo componente con código JSX para obtener un código HTML básico para Breadcrumb, y luego tenemos que aplicar efectos CSS para hacer algunos cambios y hacer que su apariencia sea la mejor.

ReactJS es un marco web basado en componentes que se utiliza para crear componentes reutilizables en Frontend. Las migas de pan se utilizan para proporcionar una barra de navegación avanzada que podemos usar en Frontend para hacer que recorrer nuestro sitio web sea interactivo.

Enfoque: Para hacer una ruta de navegación, el CSS básico que necesitaremos se muestra a continuación.

• Paso 1: haga una lista en línea de los elementos que se incluirán en la ruta de navegación de la barra de navegación. El código para ello se da a continuación:

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

  El relleno se aplica para crear un espacio entre los elementos de la barra de navegación y la decoración de texto se utiliza para que el texto aparezca subrayado.

• Paso 2: diseñe la ruta de navegación agregando algunos caracteres para separar los elementos de la lista, como una barra inclinada o una coma, etc. Para hacer eso, debemos usar (::before) en CSS como se indica a continuación:

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

• Paso 3: También podemos establecer el color de fondo y el borde para hacer que el aspecto de nuestra Breadcrumb sea agradable.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app GFGHosting

• Paso 2: después de crear la carpeta de su proyecto, es decir, GFGHosting , acceda a ella con el siguiente comando:

  cd GFGHosting

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

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

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Se crea la miga de pan