Como Criar um Menu de Navegação Vertical no WordPress

Um menu de navegação bem projetado é importante se você deseja criar uma experiência de usuário positiva em seu site WordPress.

Embora os menus horizontais sejam comuns, um menu de navegação vertical oferece uma maneira única e eficaz de organizar o conteúdo do seu site, especialmente para sites com muitas páginas ou estruturas complexas.

Esses menus podem melhorar a acessibilidade porque se encaixam melhor na barra lateral do seu site e são mais fáceis de navegar em dispositivos móveis.

Neste artigo, mostraremos como criar facilmente um menu de navegação vertical no WordPress.

O que é um Menu de Navegação?

Um menu de navegação é uma lista de links que apontam para áreas importantes de um site WordPress. Este menu é geralmente apresentado como uma barra horizontal de links na parte superior de cada página.

Os menus de navegação dão estrutura ao seu site e ajudam os visitantes a encontrar o que procuram. Você pode adicionar links para suas páginas mais importantes, categorias ou tópicos, posts de blog do WordPress e até mesmo adicionar links personalizados, como seu perfil de mídia social.

Mas, embora você frequentemente os veja posicionados horizontalmente no topo de um site, os menus de navegação verticais têm muitos usos e vantagens.

Um menu de navegação vertical ocupa menos espaço na página, é mais fácil de escanear e navegar, e pode ser colocado na sua barra lateral, rodapé ou até mesmo como uma janela pop-up, tornando-o mais flexível.

Por exemplo, se você tem uma loja virtual, usar um menu de navegação vertical permitirá exibir muito mais categorias de produtos e produtos sem ocupar muito espaço.

Dito isso, vamos dar uma olhada em várias maneiras de criar um menu de navegação vertical no WordPress. Aqui estão os tópicos que abordaremos neste artigo:

• Experimente Diferentes Locais de Exibição de Menu
• Adicionando um Menu de Navegação Vertical à Barra Lateral
• Criando um Menu de Navegação Vertical em uma Postagem ou Página
• Adicionando um Menu de Navegação Vertical Usando o Editor Completo do Site
• Criando um Menu de Navegação Vertical Usando um Plugin Construtor de Temas
• Criando um Menu de Navegação Vertical Responsivo para Dispositivos Móveis
• Crie um Menu Dropdown no WordPress
• Criando um Mega Menu no WordPress
• Bônus: Crie um Menu de Navegação Flutuante Fixo no WordPress

Experimente Diferentes Locais de Exibição de Menu

Ao adicionar um menu de navegação ao seu site, ele será exibido vertical ou horizontalmente. Isso depende do seu tema, bem como da localização do menu que você selecionar.

O número de locais de menu disponíveis depende do tema que você está usando. Você pode descobrir que alguns desses locais exibem o menu verticalmente.

Para testar isso com seu tema, navegue até a página Aparência » Menus na barra lateral de administração do WordPress. Aqui, você pode experimentar para ver quais locais estão disponíveis em seu site e como eles são exibidos.

Por exemplo, o tema Twenty Twenty-One não oferece locais verticais, enquanto o tema Twenty Twenty oferece um chamado 'Menu Expandido para Desktop'.

Você pode simplesmente selecionar o menu que deseja exibir verticalmente e, em seguida, marcar a caixa ‘Menu Expandido para Desktop’ na parte inferior da tela.

Depois disso, você deve garantir que clicou no botão ‘Salvar Menu’ para armazenar suas configurações. É assim que fica em nosso site de demonstração.

Para mais informações sobre como editar menus e locais de menus, você pode consultar nosso guia para iniciantes sobre como adicionar um menu de navegação no WordPress.

Adicionando um Menu de Navegação Vertical à Barra Lateral

Não importa qual tema você esteja usando, é fácil adicionar um menu de navegação vertical à barra lateral usando um widget.

Primeiro, você precisará criar um menu de navegação que você deseja exibir, se ainda não o fez. Em seguida, você deve visitar a página Aparência » Widgets no painel do WordPress.

A partir daqui, basta clicar no botão '+' no canto superior esquerdo da página e arrastar o bloco Menu de Navegação para a barra lateral.

Depois disso, você pode dar um nome ao widget e selecionar o menu que deseja exibir no menu suspenso. Por fim, clique no botão 'Atualizar' no topo para salvar suas configurações.

Veja como o menu da barra lateral vertical aparece em nosso blog WordPress de demonstração.

Criando um Menu de Navegação Vertical em uma Postagem ou Página

Você pode adicionar um menu de navegação vertical a posts e páginas de maneira semelhante.

Primeiro, você precisa criar um novo post ou editar um existente.

Depois disso, clique no botão '+' na parte superior da página e, em seguida, arraste o bloco de Navegação para a página.

Em seguida, escolha qual menu será exibido. Simplesmente clique no botão 'Selecionar Menu' na barra de ferramentas e selecione o menu desejado.

Finalmente, você precisa olhar as configurações do bloco no painel à direita.

Lá, você encontrará dois botões para a orientação do menu. Você precisará clicar no botão de seta para baixo para orientar o menu verticalmente.

Quando terminar, clique no botão 'Publicar' ou 'Atualizar' para salvar suas configurações.

Adicionando um Menu de Navegação Vertical Usando o Editor Completo do Site

Se você estiver usando um tema baseado em blocos, poderá adicionar facilmente o menu de navegação vertical ao seu site usando o editor de site completo.

Para fazer isso, vá para a tela Aparência » Editor no seu painel do WordPress. Uma vez no editor, clique no menu de navegação que aparece no topo do cabeçalho do site.

Em seguida, clique no botão ‘Selecionar Navegação’ na barra de ferramentas.

Agora, você verá diferentes opções para personalizar o menu de navegação no painel à direita.

Uma dessas opções é se o menu será exibido com orientação horizontal ou vertical. Simplesmente clique na seta para baixo para a orientação vertical para criar um menu vertical.

Para mais informações, veja nosso guia sobre como adicionar um menu de navegação no WordPress.

Finalmente, clique no botão ‘Salvar’ para armazenar suas configurações. Você agora adicionou um menu de navegação vertical ao seu site.

Criando um Menu de Navegação Vertical Usando um Plugin Construtor de Temas

SeedProd é o melhor plugin construtor de páginas e temas personalizados do WordPress do mercado. Ele permite que você crie facilmente menus verticais em qualquer lugar do seu site WordPress.

Primeiro, você precisa instalar e ativar o plugin SeedProd. Para mais detalhes, veja nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Após a ativação, você precisará inserir sua chave de licença. Você pode encontrar essa informação em sua conta no site do SeedProd.

Depois disso, você pode usar o SeedProd para criar um tema personalizado para WordPress.

Criando um Tema WordPress Personalizado

Você encontrará o construtor de temas do SeedProd navegando até a página SeedProd » Theme Builder. Aqui, você usará um dos temas prontos do SeedProd como ponto de partida. Isso substituirá seu tema WordPress existente por um design novo e personalizado.

Você pode fazer isso clicando no botão ‘Themes’.

Em seguida, será exibida uma lista de temas projetados profissionalmente para diferentes tipos de sites. Por exemplo, existem modelos chamados 'Modern Business', 'Marketing Agency' e 'Mortgage Broker Theme'.

Dê uma olhada nas opções e selecione aquela que melhor atende às suas necessidades clicando no ícone de marca de seleção.

Assim que você escolher um tema, o SeedProd gerará todos os modelos de tema que você precisa. Você pode aprender como personalizar esses modelos em nosso guia sobre como criar facilmente um tema personalizado do WordPress.

Adicionando um Menu de Navegação Vertical aos Modelos do Seu Site

Agora, você pode usar o SeedProd para adicionar um menu de navegação vertical a qualquer um dos seus modelos de tema. Neste tutorial, adicionaremos um menu ao modelo de índice do blog.

Você precisa passar o mouse sobre esse modelo e, em seguida, clicar no link ‘Editar Design’.

Isso abrirá o construtor de páginas de arrastar e soltar do SeedProd, onde você verá uma prévia do seu site à direita e um painel de blocos à esquerda.

A partir daqui, role os blocos até chegar à seção Avançado.

Assim que localizar o bloco Menu de Navegação, você deve arrastá-lo para a sua barra lateral ou para onde desejar exibir o menu de navegação. Por padrão, há apenas um item no menu, ‘Sobre’.

Agora, você precisará alterar as configurações do menu. Para fazer isso, clique no menu e as opções disponíveis serão exibidas na coluna da esquerda.

Atualmente, o tipo de menu ‘Simples’ está selecionado. Isso permite que você crie seu próprio menu de navegação no SeedProd.

No entanto, para este tutorial, clicaremos no tipo ‘Menu do WordPress’ para usar o menu de navegação do WordPress em vez disso.

Finalmente, você precisa clicar na aba ‘Avançado’. Aqui, você encontrará uma opção para orientar o layout da lista vertical ou horizontalmente.

Ao clicar no botão ‘Vertical’, você notará que a prévia muda imediatamente para um menu de navegação vertical.

Não se esqueça de clicar no botão ‘Salvar’ na parte superior da tela para armazenar seu menu vertical.

Criando um Menu de Navegação Vertical Responsivo para Dispositivos Móveis

Pode ser difícil tocar em um menu padrão ao usar a tela pequena de um smartphone. É por isso que recomendamos que você visualize a versão móvel do seu site WordPress para ver como seu site aparece em dispositivos móveis.

Menus verticais são muito mais fáceis de navegar, especialmente quando você usa um menu responsivo de tela cheia que se ajusta automaticamente a diferentes tamanhos de tela.

Para saber como tornar seu menu de navegação mais fácil de usar em dispositivos móveis, consulte nosso guia sobre como adicionar um menu responsivo de tela cheia no WordPress.

Crie um Menu Dropdown no WordPress

Um menu suspenso se parece com um menu de navegação horizontal normal na parte superior da tela. Mas quando você passa o mouse sobre um dos itens, um submenu vertical é exibido.

Se você tem um site com muito conteúdo, um menu suspenso permite organizar a estrutura do menu por tópicos ou hierarquia. Isso mostrará mais conteúdo em um espaço limitado.

Para exibir um menu de navegação suspenso em seu site, você precisará escolher um tema com suporte a menu suspenso. Depois disso, você precisa criar o menu de navegação e, em seguida, adicionar subitens a algumas das entradas do menu.

Você pode aprender como fazer isso passo a passo em nosso guia para iniciantes sobre como criar um menu suspenso no WordPress.

Criando um Mega Menu no WordPress

Um mega menu lista vários menus verticalmente pela página. Eles são semelhantes aos menus suspensos, exceto que todos os submenus são exibidos de uma vez, permitindo que os usuários encontrem seu melhor conteúdo de forma rápida e fácil.

Mega menus são altamente envolventes e interativos porque combinam o melhor dos menus horizontais e verticais para mostrar uma visão geral útil do conteúdo do seu site em uma única tela.

Recentemente adicionamos um mega menu ao WPBeginner para melhorar a descoberta de conteúdo. Explicamos como fizemos isso em nosso olhar por trás das cenas do nosso novo design de site.

Você pode aprender mais em nosso guia sobre como adicionar um mega menu ao seu site WordPress.

Bônus: Crie um Menu de Navegação Flutuante Fixo no WordPress

Você também pode criar um menu de navegação flutuante fixo para o seu site para melhorar o engajamento do usuário. Um menu fixo permanece visível na sua tela mesmo quando os usuários rolam para baixo na sua página, tornando-o fácil de acessar para os usuários.

Para tornar seu menu de navegação fixo, você precisa instalar e ativar o plugin Sticky Menu & Sticky Header. Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, acesse a página Configurações » Menu Fixo e digite #main-navigation ao lado da opção ‘Elemento Fixo (obrigatório)’. Dessa forma, você pode até mesmo tornar seu menu de navegação vertical fixo.

Quando terminar, clique em ‘Salvar Alterações’ para armazenar suas configurações. Para mais instruções, você pode ver nosso tutorial sobre como criar um menu de navegação fixo flutuante no WordPress.

Esperamos que este tutorial tenha ajudado você a aprender como criar um menu de navegação vertical no WordPress. Você também pode querer aprender como ocultar um menu móvel no WordPress ou nosso guia sobre como adicionar ícones de imagem com menus de navegação no WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.