Bootstrap Breadcrumbs: Aprenda como utilizar

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (4)  (0)

Este artigo apresenta como utilizar breadcrumbs, um conceito muito importante em websites, especialmente aos que possuem uma hierarquia entre as páginas.

Motivação

Websites, principalmente aqueles que apresentam uma hierarquia entre as páginas, normalmente fazem uso dos chamados breadcrumbs. Esses elementos, como o nome sugere (migalhas de pão, em uma tradução literal), servem para deixar um caminho para o usuário retornar de onde veio. Na Figura 1 é apresentado um exemplo.

Com esse recurso, se tivermos uma página de produto dentro da seção “Futebol”, que é uma subcategoria de “Esportes”, por exemplo, um breadcrumb poderia exibir: Esportes -> Futebol -> Nome do produto. Como aprenderemos ao longo desse artigo, o Bootstrap possui estilos prontos para a criação desse tipo de elemento. Vejamos, então, como utilizá-los.

Breadcrumbs em um website
Figura 1. Breadcrumbs em um website

Os breadcrumbs

O posicionamento dos breadcrumbs varia muito de aplicação para aplicação. Isso é algo que é definido, a priori, pela equipe de desenvolvimento ou de design, o exibindo de acordo com sua importância na navegação. Vejamos, novamente, a Figura 1. Note que temos o breadcrumb exibindo a estrutura hierárquica de navegação, isto é, temos as categorias e subcategorias até chegarmos ao produto.

Os Breadcrumbs com Bootstrap

A definição desse tipo de hierarquia com o Bootstrap é relativamente simples. Para isso, utilizamos, basicamente, duas classes para definir o visual dos elementos do breadcrumb. A classe breadcrumb é a mãe, e é responsável pela definição dos estilos padrão. Já a classe breadcrumb-item, deve ser utilizada em cada item para garantir que eles tenham, também, o visual definido.

A outra classe que serve para completar o comportamento desse recurso é a active. Ela irá indicar para o usuário em qual nível da hierarquia ele se encontra. Normalmente é utilizada para o último item. Assim, a hierarquia Esportes -> Futebol -> Nome do produto teria o nome do produto exibido com a classe active. Isso fica mais claro ao analisarmos o código da Listagem 1.

01 <ol class="breadcrumb">
02   <li class="breadcrumb-item"><a href="/Esportes">Esportes</a></li>
03   <li class="breadcrumb-item"><a href="/Esportes/Futebol">Futebol</a></li>
04   <li class="breadcrumb-item active">Camiseta Grêmio 2017/1</li>
05 </ol>  
Listagem 1. Código para criação de breadcrumbs no Bootstrap.

Linha 01: Definição de uma hierarquia utilizando o elemento HTML <ol> (ordered list – lista ordenada). É importante notar que não é necessário declarar elementos de lista para a criação do breadcrumb;

Linha 02: Primeiro item da hierarquia. Nesse caso, podemos notar que a hierarquia também existe nos links: estamos vinculando o item a uma página inicial da categoria “Esportes”;

Linha 03: Segundo item da hierarquia. Note que sua definição é semelhante à do item anterior, alterando apenas o link (/Esportes/Futebol) e o texto exibido (“Futebol”);

Linha 04: Aqui temos o item ativo em nosso breadcrumb. Visualmente, isso significa que esse elemento não é um link, mas apenas uma sinalização da página em que nos encontramos;

Esse código gera um visual bastante interessante. O Bootstrap, como sabemos, possui uma série de visuais prontos e o breadcrumb não é diferente, como podemos observar na Figura 2. Repare que temos exatamente aquilo que definimos no código, com o último elemento sendo o “ativo”, indicando que estamos na página do produto.

Breadcrumbs com Bootstrap
Figura 2. Breadcrumbs com Bootstrap

Com esse exemplo, podemos notar o quão simples é a adição de um elemento de navegação tão importante a um website. Essa é uma das vantagens do framework Bootstrap.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ficou com alguma dúvida?