El breadcrumb, o migas de pan, es un componente que te guía a través de una ruta de navegación, mostrando las categorías y subcategorías donde te encuentras. Es útil para mostrar la jerarquía de navegación en una página web.
Paso 1: Consultar la Documentación de Bootstrap
Primero, vamos a la documentación oficial de Bootstrap en getbootstrap.com. En el apartado de componentes, encontrarás la sección de breadcrumb. Aquí, Bootstrap nos proporciona ejemplos y el código necesario para implementarlos.
Vamos a empezar con un breadcrumb básico. Puedes crear un breadcrumb utilizando la etiqueta <nav> y <ol> para la lista de elementos. Aquí tienes el código básico:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breadcrumb en Bootstrap 5</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>Paso 3: Cambiar el Separador de Breadcrumb
Por defecto, el separador de los elementos en un breadcrumb es una barra inclinada (/). Puedes cambiar esto utilizando la clase breadcrumb-divider y aplicando el separador que prefieras:
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<style>
.breadcrumb-item + .breadcrumb-item::before {
content: ">";
}
</style>También puedes utilizar otros caracteres o incluso imágenes como separadores:
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<style>
.breadcrumb-item + .breadcrumb-item::before {
content: url('path/to/image.png');
}
</style>Bootstrap permite cambiar el estilo del breadcrumb para que se adapte mejor a la estética de tu sitio web. Aquí tienes un ejemplo utilizando una imagen como separador:
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<style>
.breadcrumb-item + .breadcrumb-item::before {
content: url('data:image/png;base64,iVBORw0...');
}
</style>Ejemplo Completo
Aquí tienes un ejemplo completo con diferentes usos de breadcrumbs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breadcrumb en Bootstrap 5</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<style>
.breadcrumb-item + .breadcrumb-item::before {
content: ">";
}
</style>
</head>
<body>
<div class="container mt-3">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>Conclusión
¡Y eso es todo! Hemos aprendido cómo crear y personalizar breadcrumbs en Bootstrap 5, incluyendo cómo cambiar los separadores y estilizar los elementos.
