Navegação Estrutural

A navegação estrutural, também chamada de “breadcrumbs” serve para orientar o utilizador no local onde se encontra, bem como identificar os caminhos de como chegou ao conteúdo que está a ver.

Este componente, apesar de simples e parecer dispensável, é muito útil para o utilizador.

Código
Ocultar Código
  • HTML
  • CSS

<ul class="horizontal-breadcrumb">
    <li><a href="#">Principal</a> &gt;</li>
    <li><a href="#">Secundário</a>&gt;</li>
    <li><a href="#">Onde Estou</a></li>
</ul>

ul.horizontal-breadcrumb li{
    display: inline-block;
}
ul.horizontal-breadcrumb li a{
    font-size: 13px;
    color: #2A2A2A;
    font-family: "latoregular";
}
ul.horizontal-breadcrumb li:last-child a{
    color: #2980B9;
}