Como Criar um Menu de Navegação Vertical no WordPress (5 Maneiras Fáceis) 

Se o seu site WordPress está crescendo e a navegação superior está ficando lotada, um menu de navegação vertical é uma das soluções mais fáceis. Eu já vi funcionar bem para lojas de e-commerce com muitas categorias de produtos, sites de documentação e sites de membros que precisam de um layout de barra lateral estruturado.

Neste guia, mostrarei 5 maneiras de adicionar um menu de navegação vertical ao WordPress sem escrever uma única linha de código.

O que é uma Barra de Navegação Vertical no WordPress?

Uma barra de navegação vertical no WordPress é um menu do site que exibe links em uma coluna empilhada em vez da linha horizontal padrão. Geralmente fica em uma barra lateral esquerda, embora você possa colocá-la em qualquer lugar que seu tema ou construtor de páginas suporte.

Usuários do WordPress adicionam um para liberar espaço no cabeçalho, melhorar a escaneabilidade em sites com muito conteúdo e combinar com designs que se beneficiam de um layout de navegação de barra lateral mais estruturado.

Quando Usar uma Barra de Navegação Vertical no WordPress?

Um menu de navegação vertical faz mais sentido quando seu site tem muito para navegar e o cabeçalho está ficando sem espaço. Ele transforma o espaço da barra lateral em um menu de navegação lateral claro e escaneável em vez de amontoar tudo em uma barra superior.

É especialmente útil para sites de e-commerce com 10 ou mais categorias de produtos, onde os compradores precisam navegar por muitas opções sem lotar o cabeçalho. Sites de documentação e bases de conhecimento o usam pela mesma razão, assim como sites de membros que dependem de um menu de barra lateral vertical para agrupar links do painel por seção.

Dito isso, um menu de navegação lateral vertical nem sempre é a escolha certa. Sites de página única, sites com menos de 6 itens de navegação e designs mobile-first são melhor atendidos por um menu horizontal padrão.

Como Criar Navegação Vertical com SeedProd

Criar um menu de navegação vertical no WordPress é muito fácil com o SeedProd, o construtor de sites WordPress com arrastar e soltar.

Com o construtor de arrastar e soltar do SeedProd, você pode criar temas WordPress personalizados e páginas da web flexíveis sem escrever código PHP, Jquery, Javascript, HTML e CSS. Além disso, o bloco Nav Menu inclui navegação vertical integrada.

Primeiro, você precisará instalar e ativar o plugin SeedProd. Se precisar de ajuda, consulte nossa documentação sobre como instalar o SeedProd Pro.

Observação: Com a versão gratuita do SeedProd, você pode adicionar uma barra de navegação vertical a páginas individuais. No entanto, usaremos o SeedProd Pro neste guia para adicionar uma barra de menu aos nossos modelos de tema do WordPress.

Após ativar o plugin e inserir sua chave de licença, você estará pronto para criar um tema personalizado do WordPress.

Criação de um Tema WordPress Personalizado

Para criar seu tema, navegue até a página SeedProd » Theme Builder no seu painel do WordPress. Nesta página, você pode escolher um tema pré-fabricado como ponto de partida.

Ele substituirá seu tema existente por um design de site responsivo personalizado de sua escolha. Para fazer isso, clique no botão Theme Template Kits.

Em seguida, você verá a biblioteca de temas com designs para diferentes nichos de sites. Clicar no menu suspenso permite filtrá-los por popularidade e tipo.

Navegue por eles e clique no ícone de marca de seleção em qualquer design para importá-lo.

Quando você importa um design, o SeedProd gera os modelos que compõem seu tema. A partir daí, você pode editar cada modelo e personalizar o design para atender às suas necessidades.

Para todas as etapas, consulte nosso guia sobre como criar um tema personalizado do WordPress.

Adicionar uma Barra de Navegação Vertical aos Seus Modelos

Você pode usar o SeedProd para adicionar uma barra de navegação vertical a qualquer um dos seus modelos de tema. Para este guia, adicionaremos um menu ao modelo 'Página do Blog'.

Para fazer isso, passe o cursor do mouse sobre o modelo e clique no link 'Editar Design'.

Isso abre o construtor de páginas com arrastar e soltar, com uma visualização ao vivo à direita e uma barra lateral de blocos à esquerda.

Agora, role para baixo na barra lateral de blocos e procure o bloco Nav Menu. Assim que o encontrar, arraste-o para onde deseja exibir seu menu de navegação, como a barra lateral.

Por padrão, o Nav Menu exibirá apenas um item de menu 'Sobre'. Você pode alterar isso nas configurações do menu clicando no bloco. Em seguida, ele mostrará as configurações na barra lateral esquerda.

No início, o tipo de menu 'Simples' está ativado, o que permite que você crie seu próprio menu de navegação.

Para este guia, selecionaremos o tipo 'Menu do WordPress', que permite usar seu menu de navegação existente do WordPress.

O próximo passo é tornar a barra vertical em vez de uma barra de navegação horizontal. Você pode fazer isso clicando na guia Avançado nas configurações do bloco e selecionando o layout de lista 'Vertical'.

No mesmo painel, você pode personalizar as cores do menu, tipografia, cor de fundo, configuração de alinhamento de texto, decoração de texto e muito mais.

Quando estiver satisfeito com seu menu, clique no botão Salvar para armazenar suas alterações. Você pode repetir essas etapas para cada modelo que exija navegação vertical.

4 Maneiras Adicionais de Criar Navegação Vertical no WordPress

Criar uma barra de navegação vertical com o SeedProd é uma ótima opção se você estiver usando um plugin de construtor de temas. Mas e se você quiser usar as ferramentas já existentes em seu site?

Abaixo, você encontrará quatro métodos adicionais para adicionar navegação vertical ao WordPress.

Quais Temas WordPress Incluem Suporte para Navegação Vertical?

Outra maneira de adicionar navegação vertical ao seu site é escolher um tema do WordPress que a suporte. Muitos temas do WordPress têm suporte integrado para barras de navegação verticais, economizando muito tempo.

A vantagem aqui é a simplicidade. Escolha um tema que se adapte à sua estética e deixe que ele faça o trabalho pesado para você. Esta pode ser a solução perfeita se você não tem muita afinidade com tecnologia ou está com pouco tempo.

No entanto, esteja ciente de que nem todos os temas oferecerão esse recurso. Ao escolher seu tema, vá até as configurações ou documentação dele para ver se ele inclui uma barra de navegação vertical.

Por exemplo, o tema padrão Twenty-Twenty-One não inclui navegação vertical. Enquanto isso, o tema Astra suporta um menu hambúrguer off-canvas e um menu de rodapé que você pode exibir empilhado ou em linha.

Para obter ajuda na edição do seu menu, consulte nosso guia sobre como editar a barra de navegação no WordPress.

Adicionar uma Barra de Navegação Vertical com o Editor de Site Completo

Muitos temas do WordPress são compatíveis com o Editor de Site Completo (FSE) do WordPress. Eles são conhecidos como temas baseados em blocos e permitem que você personalize seu tema visualmente.

Para fazer isso, navegue até Aparência » Editor no seu painel do WordPress. A partir daí, clique na barra de navegação na parte superior do cabeçalho do seu site.

Após clicar no menu, você verá várias opções no painel de navegação lateral. Por exemplo, se você clicar na guia Configurações, haverá uma opção para alterar a orientação dos itens da lista do menu.

Clique na seta para baixo para alternar o menu para navegação vertical.

Agora clique no botão Salvar para salvar suas alterações.

Adicionar um Menu de Navegação Vertical à Barra Lateral do WordPress

Você pode facilmente adicionar um menu de navegação lateral ao seu site usando widgets se não quiser alterar seu tema do WordPress. Este método é ideal se você não tem um tema baseado em blocos instalado.

Primeiro, certifique-se de ter configurado um menu de navegação. Em seguida, vá para Aparência » Widgets no seu painel do WordPress.

A partir daí, clique no botão (+) e procure pelo widget de Menu de Navegação.

Após clicar para adicioná-lo à sua barra lateral, você pode dar um título ao menu e escolher qual menu exibir.

Agora salve suas alterações e visualize seu site para ver o menu de navegação lateral vertical em ação.

Criar uma Barra de Navegação Vertical para Posts e Páginas

Essa abordagem funciona bem para posts de tutoriais longos ou páginas de documentação onde você deseja navegação por seções dentro do artigo, ao lado do conteúdo principal. Ela usa o mesmo Bloco de Navegação do método da barra lateral, mas colocado diretamente dentro do conteúdo do post ou da página.

Primeiro, edite ou crie um novo post ou página. Em seguida, adicione o Bloco de Navegação.

Na barra lateral direita, clique na seta para baixo para tornar o menu vertical e, em seguida, salve suas alterações.

Ao visualizar a postagem ou página, você verá uma nova barra de navegação vertical.

Perguntas Frequentes Sobre Barras de Navegação Verticais

O que é uma barra de navegação vertical?

Uma barra de navegação vertical é um menu do site que exibe links em uma coluna empilhada em vez de uma linha horizontal. Geralmente aparece em uma barra lateral esquerda e funciona bem para sites com muitas páginas ou categorias para navegar. A maioria dos sites WordPress que adicionam um o fazem para liberar espaço no cabeçalho e facilitar a leitura do menu.

Quando você deve usar uma barra de navegação vertical no WordPress?

Use um menu de navegação vertical quando seu site tiver mais de 6 ou 7 itens de navegação de nível superior, ou quando seu público precisar navegar por muitas categorias de uma vez. É uma boa opção para lojas de comércio eletrônico, bases de conhecimento e sites de associação. Evite-o em sites simples ou designs mobile-first onde o espaço da barra lateral é limitado.

Qual é a diferença entre navegação vertical e horizontal?

A navegação horizontal exibe links de menu em uma única linha na parte superior da página. A navegação vertical empilha links em uma coluna, geralmente em uma barra lateral. Menus horizontais funcionam bem para sites simples com poucas páginas; menus verticais lidam com listas de links maiores sem sobrecarregar o cabeçalho.

Como você lida com a responsividade móvel para uma barra de navegação vertical?

A maioria das ferramentas do WordPress que adicionam navegação vertical, incluindo o SeedProd, lidam com a responsividade móvel automaticamente. Para configurações personalizadas, use um menu recolhível ou estilo hambúrguer em telas pequenas para que a navegação vertical não ocupe toda a área de visualização. Sempre teste em um dispositivo móvel real antes de publicar.

Qual é a largura ideal para uma barra de navegação vertical?

Uma largura de cerca de 200 a 300 pixels funciona bem para a maioria dos sites. É larga o suficiente para exibir rótulos de menu completos sem truncar e estreita o suficiente para deixar espaço para o seu conteúdo principal. Sempre verifique se o menu permanece legível em uma área de visualização de tablet de 768px, não apenas no desktop.

Construa Seu Próximo Menu de Navegação Vertical

Isso conclui nosso guia sobre como criar um menu de navegação vertical no WordPress. Agora é sua vez de construir um sistema de navegação mais amigável para o seu site.

Seja usando o SeedProd ou um dos outros métodos, o objetivo é o mesmo. Um bom sistema de navegação torna seu site mais fácil de usar, e isso sempre vale o esforço.

Boas criações!

Pronto para construir seu site? Obtenha o SeedProd e adicione navegação vertical a qualquer modelo em minutos.

Para mais dicas de navegação, veja o seguinte tutorial:

• Como Personalizar Estilos de Menu do WordPress
• Como Editar Menus Móveis no WordPress
• A Navegação de Landing Page Morreu: Eis o Porquê
• Como Criar uma Landing Page Sem Navegação
• Como Adicionar uma Barra Lateral Diferente para Páginas Diferentes no WordPress

Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.