NOTA: Alguns dos exemplos interativos podem usar CSS que você ainda não aprendeu. Não se preocupe em tentar entender todo o código. O objetivo dos exemplos é mostrar prévias desses conceitos de design para que você entenda melhor como as coisas funcionam. Para ver as prévias, você precisará ativar o editor interativo. Quando se trata de design web, existem muitos tipos de auxílios de navegação que você pode usar. Exemplos incluem barras de navegação superior, barras laterais e rodapés. Mas se o seu site for mais complexo com níveis mais profundos de navegação, você pode querer considerar o uso de breadcrumbs. Breadcrumbs são uma ajuda de navegação que mostra ao usuário onde ele está na hierarquia do site. Aqui está um exemplo de como os breadcrumbs aparecem para um site de eletrônicos fictício:

<link rel="stylesheet" href="styles.css">
<div class="breadcrumbs">
  Home / Electronics / Phones / Smartphone XYZ
</div>

.breadcrumbs {
  font-size: 0.9rem;
  color: #555;
  margin: 1rem 0;
}

Na maioria dos sites, os breadcrumbs são exibidos no topo da página, mostrando ao usuário o caminho que ele percorreu para chegar à página atual. A partir da Homepage, o usuário navegou para a categoria Electronics, depois para a categoria Phones e finalmente para o produto Smartphone XYZ. Você provavelmente já interagiu com breadcrumbs em um site enquanto procurava por um produto ou informação específica. O uso de breadcrumbs é útil porque pode ajudar os usuários a entender onde eles estão na hierarquia do site e como navegar de volta para as páginas anteriores. Isso é especialmente útil quando um usuário veio de um resultado de busca ou de um link externo e precisa entender o contexto da página em que está. Quando se trata de projetar breadcrumbs, há algumas considerações a serem lembradas. O primeiro é decidir qual será o separador. O separador é o caractere que separa os diferentes níveis da hierarquia. Separadores comuns incluem o sinal de maior que (>), as aspas angulares direitas (») e a barra (/).

<link rel="stylesheet" href="styles.css">
<div class="breadcrumbs">
  Home &gt; Electronics &gt; Phones &gt; Smartphone XYZ
</div>

.breadcrumbs {
  font-size: 0.9rem;
  color: #555;
  margin: 1rem 0;
}

A segunda consideração é a colocação dos breadcrumbs. Os breadcrumbs são tipicamente colocados no topo da página, acima ou abaixo da barra de navegação principal. Os usuários não devem ter que se esforçar para encontrar os breadcrumbs, então certifique-se de que eles estejam visíveis e fáceis de localizar.

<link rel="stylesheet" href="styles.css">
<nav class="main-nav">
  <a href="#">Home</a>
  <a href="#">Electronics</a>
  <a href="#">Phones</a>
</nav>
<div class="breadcrumbs">
  Home &gt; Electronics &gt; Phones &gt; Smartphone XYZ
</div>

.main-nav {
  background-color: #333;
  padding: 1rem;
}

.main-nav a {
  color: white;
  margin-right: 1rem;
  text-decoration: none;
}

.breadcrumbs {
  font-size: 0.9rem;
  color: #555;
  margin: 1rem 0;
}

Outra consideração é o tamanho dos breadcrumbs. Você quer garantir que os breadcrumbs sejam grandes o suficiente para serem facilmente lidos, mas não tão grandes a ponto de ocuparem muito espaço na página. Lembre-se, os breadcrumbs não são destinados a servir como uma ferramenta de navegação primária, mas sim como um auxílio de navegação secundário. Em sites onde há muita informação em uma página, os usuários podem ver facilmente onde estão na hierarquia e navegar de volta para páginas anteriores usando breadcrumbs.

<link rel="stylesheet" href="styles.css">
<div class="breadcrumbs">
  Home &gt; Electronics &gt; Phones &gt; Smartphone XYZ
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

.breadcrumbs {
  font-size: 1rem;
  color: #555;
  margin: 1rem 0;
}   

p {
  font-size: 1.2rem;
  line-height: 1.6;
}

Então, quando você deve usar breadcrumbs no seu site? Se o seu site for simples e tiver uma hierarquia rasa, breadcrumbs podem não ser necessários. Uma hierarquia rasa significa que o site tem apenas alguns níveis de navegação, então breadcrumbs podem não agregar muito valor. Normalmente, você verá breadcrumbs em sites de comércio eletrônico, sites de notícias e outros sites com uma hierarquia profunda como sites de documentação técnica.