Migas de Pan
Las migas de pan se usan para mostrar al usuario donde se encuentra y ofrecer una navegación secundaria hacia los niveles ascendientes de la página actual.
- HTML
- JS
<nav aria-label="Breadcrumb" class="ulpgcds-breadcrumb">
<div class="ulpgcds-breadcrumb-label">Te encuentras en:</div>
<ul>
<li class="ulpgcds-breadcrumb__item"><a class="ulpgcds-breadcrumb__item__link first" href="#">Inicio</a></li>
<li class="ulpgcds-breadcrumb__item"><a class="ulpgcds-breadcrumb__item__link" href="#">Página intermedia</a></li>
<li aria-current="page" class="breadcrumb__item">Página actual</li>
</ul>
</nav> Variantes
Migas de pan con tres o másniveles de profundidad
- HTML
- JS
<nav aria-label="Breadcrumb" class="ulpgcds-breadcrumb">
<div class="ulpgcds-breadcrumb-label">Te encuentras en:</div>
<ul>
<li class="ulpgcds-breadcrumb__item"><a class="ulpgcds-breadcrumb__item__link" href="#">Inicio</a></li>
<li class="ulpgcds-breadcrumb__item"><a class="ulpgcds-breadcrumb__item__link" href="#">Página intermedia 1</a></li>
<li class="ulpgcds-breadcrumb__item"><a class="ulpgcds-breadcrumb__item__link" href="#">Otra página</a></li>
<li class="ulpgcds-breadcrumb__item"><a class="ulpgcds-breadcrumb__item__link" href="#">Nivel anterior</a></li>
<li aria-current="page" class="ulpgcds-breadcrumb__item">Página actual</li>
</ul>
</nav> Uso del componente
Las migas de pan son un elemento de navegación muy importante que ayuda al usuario a identificar, fácilmente, en qué página se encuentra dentro de la arquitectura el sitio web.
Las migas de pan se componen por una lista de enlaces que representan la página actual y sus “ascendientes”.
Buenas prácticas:
- Las migas de pan deben estar presentes en todas las páginas del sitio web, excepto la página de inicio.
- Los enlaces que se muestran en las migas de pan deben hacer referencia a la arquitectura del sitio, no a la navegación que ha realizado el usuario.
- El contenido de cada enlace debe ser el título de la página a la que enlaza.
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
| Selector CSS | Descripción |
|---|---|
| .ulpgcds-breadcrumb | Aplica los estilos de las migas de pan |
| .ulpgcds-breadcrumb__item | Aplica los estilos a un elemento del listado de navegación de la miga de pan |
| .ulpgcds-breadcrumb__item__link | Aplica los estilos a los enlaces disponible en la miga de pan |
Diseño
En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios.
