Breadcrumb

Estilos para el breadcrumb general de las distintas páginas. En pantallas pequeñas, los enlaces intermedios se colapsan para optimizar el espacio.

Contenido

Para evitar breadcrumbs demasiado largos en pantallas pequeñas y medianas, se ocultan los niveles intermedios, dejando siempre visibles la página actual, el primer nivel y el anterior. La página actual se muestra sin enlace a sí misma y con el atributo aria-current="page" para indicar a los lectores de pantalla que este es el nivel actual.

Si hay más de 3 niveles se debe añadir en segundo lugar el elemento con clase breadcrumb-more

Breadcrumb

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Inicio</a></li>
        <li class="breadcrumb-item breadcrumb-more" aria-hidden="true"></li>
        <li class="breadcrumb-item"><a href="#">Nivel 1</a></li>
        <li class="breadcrumb-item"><a href="#">Nivel 2</a></li>
        <li class="breadcrumb-item"><a href="#">Nivel 3</a></li>
        <li class="breadcrumb-item active" aria-current="page">Página actual</li>
    </ol>
</nav>
Subir