Bootstrap Breadcrumbs: Aprenda como utilizar

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.

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.

• 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.

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.

Curso relacionado: Web Site Responsivo com Bootstrap