Um visitante aterra no seu site, abre a página de «Serviços» e não consegue perceber de imediato onde está. Os itens do menu parecem todos iguais. Não há estado ativo. Isto não é um bug do WordPress; por predefinição, um tema não é obrigado a destacar o item atual. Mas umas poucas linhas de CSS resolvem o problema em menos de um minuto.

O WordPress atribui automaticamente um conjunto de classes CSS a cada item de menu desde a versão 3.0. Três delas indicam «o utilizador está nesta página ou dentro desta secção». Basta escrever os estilos e a navegação torna-se clara sem um único clique.

💡 Visão geral rápida:

• Abra o inspetor do navegador e encontre o seletor CSS do menu do seu site
• Adicione 3 a 5 linhas de CSS no Personalizador ou no style.css com as classes .current-menu-item, .current-page-ancestor e .current-post-ancestor
• Se o site tiver vários menus, refine o seletor para que o destaque se aplique apenas ao menu principal
• Nos temas de blocos (FSE), a abordagem é a mesma, mas o CSS é adicionado através do editor do site

Que classes o WordPress adiciona aos itens de menu

Quando o WordPress renderiza um menu através de wp_nav_menu(), cada elemento <li> recebe várias classes. Aqui estão as três que controlam o estado «ativo»:

.current-menu-item é atribuída ao item cujo link aponta para a página atual. Abra «Contactos» e o item de menu «Contactos» recebe esta classe. A mais direta e comummente usada.

.current-page-ancestor é acionada quando o utilizador está numa página filha e o item de menu aponta para a página mãe. Por exemplo, o menu contém «Portefólio» e o visitante está a ler um caso de estudo dentro dessa secção. O item mãe «Portefólio» recebe a classe de antecessor, permitindo destacá-lo também e mostrar em que secção do site o utilizador se encontra.

.current-post-ancestor é o mesmo conceito, mas para artigos e categorias. Se um item de menu apontar para a categoria «Notícias» e o leitor abrir um artigo específico dessa categoria, o item «Notícias» terá esta classe.

O WordPress atribui as três classes automaticamente. Não precisa de escrever condicionais PHP nem editar templates manualmente, ao contrário do que acontecia na era do WP 2.9 e anteriores, em que cada link tinha de ser envolvido numa verificação if em relação ao URL atual. Hoje basta abrir o inspetor e ver que classe já está anexada ao item pretendido.

Passo 1: Encontrar o seletor do menu

Abra o seu site, prima F12 (ferramentas de programador) e localize o elemento <ul> ou <nav> que contém os itens do menu. Normalmente, tem este aspeto:

1
<ul id="primary-menu" class="menu">
2
  <li class="menu-item ... current-menu-item">
3
    <a href="/about">О нас</a>
4
  </li>
5
</ul>

Anote o identificador (#primary-menu) ou a classe (.main-navigation) do seu menu. Este é o seletor que usaremos no próximo passo para limitar o âmbito do CSS.

Nos temas clássicos, os menus são mais frequentemente renderizados através de wp_nav_menu() com um argumento theme_location como 'primary'. As classes CSS são atribuídas pela função nav_menu_css_class, e um filtro com o mesmo nome permite aos programadores adicionar ou remover classes programaticamente. Mas para o destaque básico não é necessário código, apenas CSS.

Passo 2: Adicionar o CSS de destaque

A abordagem mais simples e segura é inserir estilos através do Personalizador integrado. Na administração do WordPress, vá a Aparência → Personalizar → CSS adicional.

Copie e cole:

1
.current-menu-item > a {
2
  color: #ffffff;
3
  background: #2271b1;
4
  border-radius: 4px;
5
  padding: 6px 14px;
6
}

O que este código faz: quando um item de menu recebe a classe .current-menu-item, o seu link muda a cor do texto para branco e o fundo para azul, além de um ligeiro arredondamento. O resultado é visível imediatamente na pré-visualização do Personalizador, antes de guardar.

Para um controlo mais fino, também pode destacar os antecessores:

1
.current-menu-item > a,
2
.current-page-ancestor > a,
3
.current-post-ancestor > a {
4
  border-bottom: 3px solid #2271b1;
5
  color: #2271b1;
6
}

Aqui, em vez de um preenchimento, há um sublinhado com uma barra azul. Esta opção fica mais limpa em temas minimalistas.

Passo 3: Limitar o âmbito

Se o seu site tiver vários menus (principal no cabeçalho, secundário no rodapé, um menu de widget na barra lateral), o CSS do passo anterior irá destacar o item ativo em todo o lado. Isso raramente é desejável.

Prefixe o seletor de classe com o ID ou classe do menu específico que encontrou no passo 1:

1
#primary-menu .current-menu-item > a {
2
  background: #2271b1;
3
  color: #ffffff;
4
}

Agora, o destaque será acionado apenas dentro do elemento com id="primary-menu". Os outros menus do site permanecem inalterados.

Se o seu tema usar uma classe em vez de um ID, escreva .main-navigation .current-menu-item > a. O princípio é o mesmo.

E quanto aos temas de blocos (FSE)

Nos temas baseados em blocos (Twenty Twenty-Four, Twenty Twenty-Five e similares), não existe o Personalizador clássico com um campo de CSS adicional. Os menus são construídos através do bloco de Navegação.

O CSS é adicionado através do editor do site: Aparência → Editor → Estilos → três pontos (menu) → CSS adicional. O código é exatamente o mesmo; o WordPress continua a atribuir as classes .current-menu-item e outras também nos temas de blocos.

A diferença está no seletor. No FSE, o invólucro do menu é um <nav> com uma classe como .wp-block-navigation. Confirme o seletor através do inspetor e anteponha-o às classes de item ativo:

1
.wp-block-navigation .current-menu-item > a {
2
  border-bottom: 2px solid #2271b1;
3
}

Se o seu site corre num tema moderno e o menu não destaca «de origem», verifique se o próprio tema substitui os estados do link através de :hover e :focus sem estilos para .current-menu-item. A correção é adicionar um seletor de especificidade igual.

A personalização mais profunda de menus (de mega menus a navegação móvel) é abordada num artigo separado. Inclui também uma seleção de plugins para quando o CSS já não é suficiente: de construtores gratuitos a soluções profissionais com grelhas e ícones.

⁉️🤔 Perguntas frequentes

Porque é que o menu não destaca depois de eu adicionar o CSS?

A causa mais comum é o seletor não corresponder à estrutura HTML real. Abra o inspetor (F12), clique no item de menu ativo e verifique: o <li> tem a classe .current-menu-item? Se a classe estiver em falta, o WordPress não considera esta página como «atual» para esse item. Isto pode acontecer com tipos de conteúdo personalizados ou plugins que substituem a lógica do menu. Solução: registe o tipo personalizado com 'show_in_nav_menus' => true ou adicione suporte através do filtro nav_menu_css_class.

Posso destacar um item de menu com uma cor diferente para cada página?

Sim. O WordPress adiciona uma classe única como .menu-item-{ID} a cada item, por exemplo .menu-item-42. Use o inspetor para encontrar o ID do item pretendido e escreva: .menu-item-42 > a { background: #d63638; }. Isto permite codificar o menu por cores para corresponder às secções do site.

Como destaco um item de menu se for um link externo ou uma âncora?

Um link externo não receberá .current-menu-item porque aponta para outro site, e o WordPress não o consegue identificar como «atual». Para âncoras dentro da mesma página, a classe também não é acionada. Nestes casos, adicione manualmente uma classe CSS personalizada ao item: Aparência → Menus → Opções de ecrã → marque Classes CSS, depois introduza a sua classe nas definições do item e estilize-a.

É seguro adicionar CSS através do CSS adicional no Personalizador?

Sim. Os estilos deste campo são armazenados na base de dados e não se perdem quando o tema é atualizado, ao contrário de edições ao style.css num tema filho que podem ser acidentalmente sobrescritas. O campo está disponível desde o WordPress 4.7 e é suportado por virtualmente todos os temas clássicos.

Vale o esforço: resumo em três linhas

Destacar o item de menu ativo não é um capricho de designer; é uma base de navegação. Sem isso, os visitantes gastam segundos extra a orientar-se. Com isso, a estrutura do site é clara de relance.

A tarefa é totalmente tratada por três classes: .current-menu-item, .current-page-ancestor e .current-post-ancestor. Cabe em cinco linhas de código. A implementação demora três minutos através do Personalizador.

Se precisar de mais (comportamento de menu não padrão, destaque condicional por função de utilizador ou indicadores personalizados), veja a seleção de mais de 15 plugins de menu. Para o destaque básico, o CSS é suficiente.