En este artículo, aprenderemos cómo crear una navegación con migas de pan. Las migas de pan son una ayuda de navegación secundaria que ayuda a los usuarios a navegar fácilmente por un sitio web. Las migas de pan le brindan una orientación y le muestran exactamente dónde se encuentra dentro de la jerarquía del sitio web.
Enfoque 1: Seguiremos los pasos a continuación para crear migas de pan usando solo CSS. Este método permite personalizar exactamente cómo se verían las migas de pan.
Paso 1: Cree una lista HTML de los enlaces de navegación.
<ul class="breadcrumb-navigation">
<li><a href="home">Home</a></li>
<li><a href="webdev">Web Development</a></li>
<li><a href="frontenddev">Frontend Development</a></li>
<li>JavaScript</li>
</ul>
Paso 2: configure la pantalla CSS: en línea para mostrar la lista en la misma línea.
.breadcrumb-navigation > li {
display: inline;
}
Paso 3: agregue un separador después de cada elemento de la lista.
.breadcrumb-navigation li + li:before {
padding: 4px;
content: "/";
}
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.breadcrumb-navigation {
padding: 10px 18px;
background-color: rgb(238, 238, 238);
}
.breadcrumb-navigation>li {
display: inline;
}
.breadcrumb-navigation>li>a {
color: #026ece;
text-decoration: none;
}
.breadcrumb-navigation>li>a:hover {
color: #6fc302;
text-decoration: underline;
}
.breadcrumb-navigation li+li:before {
padding: 4px;
content: "/";
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<ul class="breadcrumb-navigation">
<li>
<a href="home">
Home
</a>
</li>
<li>
<a href="webdev">
Web Development
</a>
</li>
<li>
<a href="frontenddev">
Frontend Development
</a>
</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Producción:
Enfoque 2: Seguiremos los pasos a continuación para crear migas de pan usando la biblioteca Bootstrap. Esto permite crear rápidamente migas de pan atractivas.
Paso 1: simplemente agregamos aria-label=”breadcrumb” al elemento de navegación.
<nav aria-label="breadcrumb">
Paso 2: A continuación, agregamos class=”breadcrumb-item” en los elementos de la lista.
<li class="breadcrumb-item"><a href="#">
Home
</a></li>
Paso 3: Agregar class=”breadcrumb-item active” en el elemento de la lista actual.
<li class="breadcrumb-item active" aria-current="page">
JavaScript
</li>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" /> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="home">Home</a> </li> <li class="breadcrumb-item"> <a href="webdev">Web Development</a> </li> <li class="breadcrumb-item"> <a href="frontenddev"> Frontend Development </a> </li> <li class="breadcrumb-item active" aria-current="page"> JavaScript </li> </ol> </nav> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por swapnil074 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA