Criando Breadcrumb com HTML e CSS

Gunnar CorreaGunnar Correa26/10/2020 às 20:16:57 - 134 acessos

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


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.

Criando Breadcrumb com HTML e CSS

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.


html breadcrumb criando breadcrumb breadcrumb o que é google breadcrumb para que server um breadcrumb breadcrumb css breadcrumb ol

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.