Como Criar um Menu Dropdown no WordPress e Melhorar a Navegação do Site

Um menu dropdown do WordPress, ou menu suspenso, contém uma lista de links integrados, e todos podem ser visualizados quando o menu é expandido — seja com um clique ou passando o mouse por cima dele. Sites WordPress geralmente utilizam esse tipo de menu para economizar espaço e melhorar a navegação, o que os mantém organizados e com melhor legibilidade. 

Este artigo vai explorar os passos para criar um menu dropdown do WordPress manualmente e com um plugin. Também vamos te dar algumas dicas para aproveitar o máximo possível as funcionalidades do menu suspenso.

Como Criar um Menu Dropdown do WordPress Manualmente

Este método emprega recursos nativos de um site WordPress para criar um menu dropdown, permitindo que você o mantenha mesmo depois de trocar de tema ou instalar novos plugins. Os itens suportados no menu incluem páginas, publicações e categorias. 

Lembre-se que alguns temas não suportam menus dropdown. Verifique a documentação do seu tema para garantir que o que você está prestes a fazer é realmente suportado. 

Siga os passos indicados no guia abaixo para criar um menu suspenso personalizado no WordPress:

Passo 1: Crie os Itens do Menu

Primeiramente, precisamos criar um menu padrão. Em seu painel de administração do WordPress, navegue até a seção Aparência → Menus. Dentro da aba Editar Menus você verá a opção Estrutura do Menu, onde poderá criar um novo menu.

Lembre-se que a aparência dessa seção vai depender do tema WordPress que estiver ativo em seu site.

Adicione o nome do menu na caixa de texto e selecione a opção Criar Menu. Então, navegue até a seção de Adicionar itens do menu e selecione os elementos que desejar a partir do menu suspenso. Você pode fazer isso ao selecionar a caixa correspondente a cada item que optar por incluir em seu menu, e em seguida clicando em Adicionar ao Menu. 

Os elementos disponíveis incluem páginas, posts e categorias. Você também pode incluir links personalizados como itens do seu menu, permitindo que seus visitantes sejam redirecionados para suas money pages ou landing pages. 

Os itens selecionados serão exibidos na seção Estrutura do Menu. Então, para organizá-los, basta selecionar e arrastar os itens e subitens na ordem de sua preferência.

Passo 2: Personalize o Menu

Os menus dropdown do WordPress podem ser personalizados através de classes CSS. Primeiro, habilite esta função selecionando o menu Opções de Tela, localizado no canto superior direito da página de Menus. Depois, faça a seleção da caixa “Classes CSS”. 

Se você expandir um item do menu, verá uma nova caixa de texto denominada Classes CSS. Esta é a seção na qual você pode adicionar novas classes CSS WordPress para personalizar o estilo do seu menu dropdown.

Passo 3: Publique o Menu

Para alterar o posicionamento do menu dropdown na página do site, é possível escolher uma entre as diversas opções disponíveis na seção Configurações do Menu ou na aba Gerenciar Localização. Novamente, as escolhas possíveis de local para o menu dependem do tema WordPress que estiver ativo no seu site. 

Neste exemplo, vamos posicionar o menu no topo da página. 

Clique no botão Salvar Menu, localizado no canto inferior direito da página para salvar as alterações e publicar seu menu dropdown. 

Como Criar um Menu Dropdown do WordPress com um Plugin

Outra maneira de criar menus dropdown envolve a utilização de um plugin do WordPress. Há diversas e excelentes opções de plugins de menu disponíveis no diretório de plugins do WordPress, então basta escolher aquela que for melhor para você. 

Neste exemplo, vamos utilizar e te mostrar como criar um menu suspenso com o plugin Max Mega Menu:

1. Primeiramente, instale e ative o plugin.

2. Com o plugin já instalado e ativo, a partir do seu painel de administração do WordPress, navegue até a seção do Mega Menu. Agora, na aba de Menu Locations, clique no seu menu primário e selecione a caixa que habilita a funcionalidade dropdown. Dentro dessa mesma seção, escolha o tipo de evento que vai acionar a animação do menu e a exibição dos itens e submenus, tanto na versão desktop quanto na versão mobile do seu site. Por fim, clique em Save Changes para salvar as alterações. 

3. Por padrão, o plugin vai refletir o mesmo estilo do seu tema. Acesse a aba Menu Themes se desejar modificar o estilo, animação e tamanho do seu menu dropdown. Lembre-se de que seu menu primário deve estar selecionado na opção de seleção do tema para editar (Select theme to edit).

4. Navegue até a seção Aparência → Menus a partir do seu painel de administração do WordPress, e adicione itens no seu menu padrão ou primário com a funcionalidade do Max Mega Menu habilitada. Por fim, quando estiver com todos os elementos desejados no menu, clique em Save Menu para salvar as edições.

Dicas para Melhorar seu Menu Dropdown no WordPress

O menu de navegação é um dos primeiros elementos que os visitantes verão no seu site. Além de afetar todo o sistema de navegação do site, os menus WordPress também são determinantes na experiência do usuário. Você deve ter uma barra de menu que ajude os visitantes a encontrarem rapidamente a informação que desejam localizar em seu site. 

Sendo assim, é muito importante que seu menu principal seja visualmente atrativo e fácil de utilizar. Confira as dicas abaixo para otimizar o uso de seus menus dropdown e para garantir a melhor experiência do usuário possível para os visitantes do seu site:

Use Elementos Visuais

Uma das melhores maneiras de fazer com seu menu dropdown seja mais interativo é usar um plugin para adicionar ícones de imagens em cada um dos itens do menu.

Por exemplo, o plugin Menu Image oferece uma coleção enorme de ícones do tipo FontAwesome e DashIcons para você escolher os que deseja incluir no menu suspenso do seu site. É possível adicionar os elementos desejados no menu dropdown em diferentes posições, e também inclui-los como animações que são acionadas quando o mouse passa por cima do menu. 

Evite lotar o menu com ícones em excesso ou desnecessários, já  que isso pode prejudicar a legibilidade dos itens do menu e distrair os usuários da tarefa central, que é explorar o seu site WordPress.

Adicione Classes CSS Personalizadas

Como mencionado anteriormente, você pode adicionar classes CSS em seus novos menus. Considere a adição de CSS personalizado para estilizar o menu de acordo com suas preferências, customizando-o ainda mais. 

A partir do seu painel de administração do WordPress, acesse a aba Aparência → Personalizar e utilize o recurso de CSS Adicional para incluir seu próprio código. Neste exemplo, nós alteramos a cor da fonte do menu superior para azul:

Utilize a ferramenta de inspeção no seu navegador para localizar o seletor de #ID CSS do seu tema — você precisará disso para selecionar um elemento específico que deseja personalizar. 

Abaixo indicamos o código que utilizamos para alterar a cor da fonte do texto:

#top-menu li.menu-item a {
color:#0051D7;
}

Há diversos tutoriais de CSS e de web design para consultar online e conhecer mais recursos de personalização. Fique à vontade para experimentar diferentes estilos CSS ou utilizar códigos pré-prontos para facilitar e agilizar o processo de customização.

Habilite Menus Dropdown Multi-Level

Inserir um child-item abaixo de um parent-item ou uma página top-level em seu menu suspenso fará com que seja criada automaticamente uma relação child-parent, e isso habilita a funcionalidade multi-level do menu dropdown. 

Em um menu, um parent-item, ou item principal, pode ter múltiplos subitens ou child-items. De todo modo, recomendamos que não inclua mais do que sete subitens para cada item principal, assim você não prejudica a navegação do seu site WordPress.

Crie um Mega Menu Dropdown 

Se você deseja exibir uma grande quantidade de opções de páginas e posts em um único menu dropdown, a melhor alternativa é criar um mega menu. Diferente de um menu suspenso padrão, um mega menu geralmente contém mais subitens e links. 

Já que este tipo de menu exibe a estrutura completa do seu site, os visitantes podem acessar até a parte mais profunda do site a partir desse menu principal. Os mega menus são ideais para grandes sites, pois encurtam a jornada do usuário. 

Há diversos plugins do WordPress para te ajudar a criar um mega menu personalizado. Construímos o design do mega menu acima como um exemplo, utilizando o plugin Max Mega Menu. Outros plugins excelentes para mega menus incluem o WP Mega Menu e o Hero Mega Menu.

Habilite a Pré-Visualização em Tempo Real 

Selecione o botão Manage with Live Preview no topo da página se você preferir editar seu menu com uma referência visual enquanto estiver modificando os itens e o posicionamento do menu suspenso em seu site. A pré-visualização ao vivo é muito útil quando você está criando um menu dropdown multi-level complexo. 

Com esse modo ativado, as alterações feitas com o editor do WordPress serão exibidas em tempo real. Você também pode publicar o menu dropdown por meio do modo de pré-visualização em tempo real.  

Conclusão

Um menu dropdown do WordPress é uma parte essencial do sistema de navegação de um site. Esse elemento permite que o site seja explorado mais facilmente e, quando criado corretamente, ajuda os mecanismos de busca a fazer a indexação. 

Este artigo te mostrou os passos necessários para criar um menu dropdown manualmente no WordPress e também através de um plugin. Além disso, oferecemos algumas dicas de como otimizar e personalizar seus menus suspensos. 

Esperamos que este guia tenha respondido todas suas questões sobre esse tipo de menu do WordPress. Caso ainda tenha dúvidas, basta compartilhar na seção de comentários abaixo. Boa sorte!