Estilos para el breadcrumb general de las distintas páginas. En pantallas pequeñas, los enlaces intermedios se colapsan para optimizar el espacio.
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
<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>