segunda-feira, 25 de junho de 2018

Quick Tip: Marcando um link do Bootstrap como ativo usando Thymeleaf

Uma funcionalidade muito comum ao construirmos um menu de navegação com Bootstrap é marcarmos em qual item do menu o usuário está atualmente. Para isso basta adicionarmos a classe active no item e o Bootstrap irá aplicar um estilo diferenciado para ele.

Os menus de um site ou sistema geralmente são construídos dinamicamente. Dessa forma, precisamos marcar o item ativo de forma programática, afinal de contas não queremos ter que repetir o código do menu em todas as páginas.

Nesse Quick Tip veremos como fazer isso usando o Thymeleaf, um template engine java comumente usado com o Spring, e que é uma ótima alternativa ao JSP. É esperado que você conheça o Thymeleaf para tirar algum proveito desse post, então vejamos como fica o código um menu de navegação.


O código é bem simples. Comparamos a url da requisição com o caminho do link e caso sejam iguais adicionamos a classe active no item. Vale observar que essa verificação não vai funcionar para alguns casos particulares, como no caso de submenus, mas aí é só alterar o predicado usado para verificação (de repente usar o contains ou coisa do tipo).

Nenhum comentário:

Postar um comentário