Criando Breadcrumb com HTML e CSS

Mapas de navegação informa para seus visitantes e para o Google qual é o caminho até chegar a página atual.

Publicado em 26/10/2020 20:16

Breadcrumb são mecanismos de uma página que tem por objetivo informar qual o caminho até a página, vamos pegar como exemplo, uma página aqui do site. Para chegarmos até o artigo Criando fontes de ícones com Ico Moon, precisamos passar por:

Home;
HTML;
Criando fontes de ícones com Ico Moon.

Veja um exemplo real na imagem abaixo.

Além da estrutura em HTML que vamos utilizar aqui, podemos incluir a árvore de navegação através do JSON+LD, mas esse assunto é para um outro momento, mas de qualquer forma, recomendo fortemente você ler a documentação oficial do Google em https://developers.google.com/search/docs/data-types/breadcrumb.

Uma dica importante, é utilizar uma lista ordenada <ol> ao invés de lista não ordenada <ul>.

Além de fornecer informações para seus usuários, esse recurso também gera um bom rankeamento nos resultados de busca para o seu site, visto que o Google, por exemplo, consegue entender o caminho que o usuário percorre até chegar a página final.

Confira a nossa videoaula e aprenda a criar o seu Breadcrumb.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Breadcrumb</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <nav>
        <ol>
            <li>
                <a href="https://satellasof.com">Home</a>
            </li>
            <li>
                <a href="https://satellasoft.com/categoria/html">HTML</a>
            </li>
            <li>
                Breadcrumb
            </li>
        </ol>
    </nav>

</body>

</html>

style.css

:root {
    --cor-principal: rgb(219, 43, 43);
    --cor-secundaria: rgb(43, 110, 219);
    --cor-cinza: #666;
}

nav {
    width: 100%;
}

nav ol {
    list-style-type: none;
    padding: 0;
}

nav ol li {
    display: inline;
    font-family: Segoe ui;
}

nav ol li::after {
    content: '/';
    margin-right: 10px;
    font-size:.8em;
    color: var(--cor-cinza);
}

nav ol li:last-child::after {
    content: '';
    color: var(--cor-cinza);
}

nav ol li a {
    color: var(--cor-principal);
    text-decoration: none;
    margin-right: 10px;
}

nav ol li a:hover {
    color: var(--cor-secundaria);
    text-decoration: underline;
}

Finalizamos por aqui, mas lembre-se, coloque apenas URLs válidas e também certifique-se de que o último item não tenha link.

Até logo.