Um menu de navegação bem estruturado é essencial para orientar os visitantes em seu site WordPress e garantir que eles encontrem facilmente as informações de que precisam.
Quer esteja criando seu primeiro site ou tentando melhorar a experiência do usuário em um site existente, aprender a adicionar e personalizar um menu de navegação é uma habilidade importante.
O WordPress vem com uma interface de menu do tipo arrastar e soltar que você pode usar para criar facilmente menus de cabeçalho, menus com opções suspensas e muito mais.
Ao longo dos anos, criamos uma variedade de menus para nossas diferentes marcas, o que nos deu experiência em primeira mão no design de estilos de menus. Aprendemos quais tipos de menus funcionam melhor para diferentes empresas, quais links e páginas incluir e como otimizar a navegação para uma melhor experiência do usuário.
Neste guia passo a passo, mostraremos a você como adicionar facilmente um menu de navegação 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. Geralmente, eles são apresentados como uma barra horizontal de links na parte superior de cada página em um site WordPress.
Esses menus dão estrutura ao seu site e ajudam os visitantes a encontrar o que estão procurando. Veja a seguir a aparência do menu de navegação no WPBeginner:
O WordPress facilita muito a adição de menus e submenus. É possível adicionar links para as páginas, categorias ou tópicos mais importantes, publicações de blog e até mesmo links personalizados, como o seu perfil de mídia social.
O local exato do seu menu dependerá do seu tema do WordPress. A maioria dos temas tem várias opções, portanto, você pode criar diferentes menus que podem ser exibidos em diferentes locais.
Por exemplo, a maioria dos temas do WordPress tem um menu principal que aparece na parte superior. Alguns temas também podem incluir um menu secundário, um menu de rodapé ou um menu de navegação móvel.
Dito isso, vamos ver como você pode criar um menu de navegação personalizado no WordPress.
- Creating Your First Custom Navigation Menu
- Creating Drop-Down Menus in WordPress
- Adding Categories to WordPress Menus
- Adding Custom Links to Your WordPress Navigation Menus
- Editing or Removing a Menu Item in WordPress Navigation Menus
- Adding Navigational Menus in Full Site Editor (FSE)
- Adding WordPress Menus in Sidebars and Footers
- Going Further with Navigation Menus
- Video Tutorial
- FAQs About WordPress Menus
Como criar seu primeiro menu de navegação personalizado
Para criar um menu de navegação, você precisa acessar a página Appearance ” Menus no painel de administração do WordPress.
Observação: Se você não vir a opção“Appearance ” Menus” em seu site e vir apenas“Appearance ” Editor“, isso significa que seu tema tem a opção Full Site Editing (FSE) ativada. Você pode clicar aqui para pular para a seção FSE abaixo.
Quando estiver lá, forneça um nome para o menu, como “Menu de navegação superior”, e clique no botão “Criar menu”.
Isso expandirá a área do menu, que terá a seguinte aparência:
Em seguida, você pode escolher as páginas que deseja adicionar ao menu. Você pode adicionar automaticamente todas as novas páginas de nível superior ou pode selecionar páginas específicas na coluna da esquerda.
Primeiro, clique na guia “View All” (Exibir tudo) para ver todas as páginas do seu site. Depois disso, clique na caixa ao lado de cada uma das páginas que deseja adicionar ao menu e, em seguida, clique no botão “Add to Menu” (Adicionar ao menu).
Depois que as páginas forem adicionadas, você poderá movê-las arrastando-as e soltando-as na seção “Menu Structure” (Estrutura do menu).
Dessa forma, você pode alterar sua ordem e reorganizá-los.
Observação: Todos os itens de menu são listados em uma lista vertical (de cima para baixo) no editor de menus. Quando você colocar o menu no ar em seu site, ele será exibido vertical ou horizontalmente (da esquerda para a direita), dependendo do local selecionado.
A maioria dos temas tem vários locais diferentes onde você pode colocar menus. Neste exemplo, estamos usando o tema Astra, que tem 5 locais diferentes.
Depois de adicionar páginas ao menu, selecione o local onde deseja exibi-las e clique no botão “Save Menu” (Salvar menu).
Dica: se não tiver certeza de onde fica cada local, tente salvar o menu em locais diferentes e, em seguida, visite seu site para ver como fica. Você provavelmente não vai querer usar todos os locais, mas talvez queira usar mais de um.
Para obter mais detalhes sobre isso, consulte nosso tutorial sobre como criar um menu de navegação vertical no WordPress.
Aqui está nosso menu pronto no site:
Criando menus suspensos no WordPress
Os menus suspensos, às vezes chamados de menus aninhados, são menus de navegação com itens de menu pai e filho.
Quando você passar o cursor sobre um item principal, todos os itens secundários aparecerão abaixo dele em um submenu.
Para criar um submenu, arraste um item abaixo do item principal e, em seguida, arraste-o ligeiramente para a direita. Fizemos isso com 3 subitens abaixo de “Services” em nosso menu:
Você pode até mesmo adicionar várias camadas de menus suspensos para que seu submenu possa ter um submenu. Isso pode acabar parecendo um pouco confuso, e muitos temas não oferecem suporte a menus suspensos de várias camadas.
Para obter instruções mais detalhadas, consulte nosso tutorial sobre como criar um menu suspenso no WordPress.
Aqui está o submenu ao vivo em nosso site de demonstração:
Como adicionar categorias aos menus do WordPress
Se você estiver usando o WordPress para administrar um blog, talvez queira adicionar as categorias do seu blog como um menu suspenso no menu do WordPress.
Fazemos isso no WPBeginner e temos várias categorias, como notícias, temas, tutoriais e muito mais.
Você pode adicionar facilmente categorias ao seu menu clicando na guia Categories (Categorias) no lado esquerdo da tela do menu. Também pode ser necessário clicar na guia “View All” (Exibir tudo) para ver todas as categorias.
Basta selecionar as categorias que você deseja adicionar ao menu e clicar no botão “Add to Menu”.
As categorias aparecerão como itens de menu regulares na parte inferior de seu menu.
Em seguida, você pode arrastá-las e soltá-las na posição. Por exemplo, vamos colocar todas essas categorias sob o item de menu Blog.
Para obter mais instruções, consulte nosso guia para iniciantes sobre como adicionar tópicos nos menus de navegação do WordPress.
Veja como as diferentes categorias aparecem no menu de navegação em nosso site de demonstração:
Adição de links personalizados aos menus de navegação do WordPress
Além de categorias e páginas, o WordPress também facilita muito a adição de links personalizados ao seu menu. Você pode usá-los para vincular seus perfis de mídia social, sua loja on-line e outros sites que você possui.
Para fazer isso, você terá de usar a guia “Links personalizados” na tela Menu. Basta adicionar o link junto com o texto que deseja usar em seu menu e clicar no botão “Add to Menu”.
Você pode até mesmo ser criativo e adicionar ícones de mídia social ao seu menu ou botões de chamada para ação para obter mais conversões.
Edição ou remoção de um item de menu nos menus de navegação do WordPress
Quando você adiciona páginas ou categorias ao seu menu de navegação personalizado, o WordPress usa o título da página ou o nome da categoria como o texto do link. Você pode alterar isso se quiser.
Qualquer item de menu pode ser editado clicando na seta para baixo ao lado dele.
Você pode então alterar o nome do item de menu a partir daqui. Você também pode clicar em “Remover” para remover completamente o link do menu.
Se tiver dificuldades com a interface de arrastar e soltar, você também pode mover o item de menu clicando no link “Mover” apropriado.
Adição de menus de navegação no Full Site Editor (FSE)
O novo editor de site completo permite que você personalize seus temas do WordPress usando o editor de blocos. Ele foi lançado no WordPress 5.9 e permite que você adicione diferentes blocos aos seus modelos para criar um design exclusivo.
Para adicionar um menu de navegação usando o editor de site completo, acesse Appearance ” Editor no painel do WordPress.
Usaremos o tema padrão Twenty Twenty-Three para este tutorial. Para obter mais detalhes, consulte nosso artigo sobre os melhores temas para edição completa de sites no WordPress.
Quando estiver no editor, clique na guia “Navigation” (Navegação) para expandi-la.
Isso abrirá algumas novas configurações na coluna da esquerda.
A partir daí, basta clicar no ícone “Editar” na parte superior.
Isso abrirá o editor de site completo na tela, onde você poderá clicar no ícone “+” para adicionar um item de menu de navegação.
Um prompt será aberto e você poderá selecionar uma opção no menu suspenso.
No entanto, se você quiser adicionar um link personalizado, poderá adicionar um rótulo e um URL para o item do menu de navegação no painel de blocos. Você também pode adicionar uma opção de pesquisa ao seu menu.
Depois de adicionar um item, mude para a guia “Styles” (Estilos) na coluna da direita.
Agora você pode alterar a tipografia, a aparência, a altura, o espaçamento, as letras maiúsculas e minúsculas e a decoração do texto dos itens de menu.
Você também pode adicionar um submenu clicando em seu ícone na barra de ferramentas do bloco.
Quando terminar, você poderá visualizar as alterações para ver como o menu fica em tempo real. Em seguida, não se esqueça de clicar no botão “Save” (Salvar) na parte superior.
Como adicionar menus do WordPress em barras laterais e rodapés
Você não precisa se limitar aos locais de exibição do seu tema. Você pode adicionar menus de navegação em qualquer área que use widgets, como a barra lateral ou o rodapé.
Basta acessar Appearance ” Widgets e, em seguida, clicar no botão “Add Block” (+) na parte superior e adicionar o bloco do widget “Navigation Menu” à barra lateral.
Em seguida, adicione um título para o widget e escolha o menu correto na lista suspensa “Select Menu” (Selecionar menu).
Quando terminar, basta clicar no botão “Update” (Atualizar).
Aqui está um exemplo de um menu de rodapé personalizado do WordPress criado no site do nosso fundador, Syed Balkhi.
Indo além com os menus de navegação
Se você quiser criar um menu realmente épico com muitos links, temos um tutorial sobre como criar um mega menu no WordPress.
Isso permite que você crie um menu suspenso com vários itens, inclusive imagens.
Os mega menus são uma ótima opção se você tiver um site grande, como uma loja on-line ou um site de notícias. Esse tipo de menu é usado por sites como Reuters, Buzzfeed, Starbucks, etc.
Tutorial em vídeo
Se você preferir assistir a este tutorial, assista ao vídeo abaixo:
Perguntas frequentes sobre os menus do WordPress
Aqui estão algumas das perguntas mais comuns que os iniciantes fazem sobre os menus de navegação do WordPress.
1. Como faço para adicionar um link de página inicial a um menu do WordPress?
Para adicionar sua página inicial a um menu de navegação, você precisará clicar na guia “View All” (Exibir tudo) em Pages (Páginas). A partir daí, você verá sua página inicial.
Marque a caixa ao lado de “Home” e clique em “Add to Menu”. Lembre-se de salvar suas alterações.
2. Como faço para adicionar vários menus de navegação no WordPress?
No WordPress, você pode criar quantos menus quiser. Para colocar um menu em seu site, você precisará adicioná-lo a um dos locais de menu do seu tema ou a uma área de widget, como mostramos acima.
Se quiser adicionar vários menus de navegação ao seu site WordPress, primeiro crie os menus seguindo nosso tutorial acima.
Para colocá-los em seu site, clique na guia “Manage Locations” (Gerenciar locais).
Aqui, você pode selecionar o menu que deseja exibir nos locais de menu disponíveis em seu tema.
Se você quiser adicionar um novo local de menu ao seu site, consulte nosso tutorial sobre como adicionar menus de navegação personalizados aos temas do WordPress.
Esperamos que este artigo tenha ajudado você a aprender como adicionar um menu de navegação no WordPress. Talvez você também queira dar uma olhada em nossos guias sobre como estilizar menus de navegação no WordPress e como criar um menu de navegação flutuante e fixo no WordPress.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk
Regarding adding pages to the menu, don’t know how to solve the search problem? Or if you haven’t met him. I have a website where there are currently about 600 pages, which are mainly used for dictionary purposes. The problem is, when I want to add one of the pages to the menu, I write its link in the search, so wordpress does not find it and I have to first display all and find it alphabetically. It delays my work quite a bit and I haven’t figured out where the problem is.
WPBeginner Support
You would want to try writing the title of the page, otherwise you could use custom links and link to the page if you have the URL directly.
Administrador
Jiří Vaněk
Yes, I do. I type the site name into the search box and WordPress lists similar sites, but usually not the one I’m looking for. So I will search further where the problem might be.
David Keevis
Thanks so much for a really excellent tutorial. We’re building our site with multiple CPT’s and this post clearly explained what was needed. Had it implemented in a couple minutes. We’re using Generate Press/Generate Blocks and the query loop is exceptionally powerful. Y’all just made our day!!!!
WPBeginner Support
Glad to hear our guide helped!
Administrador
NPH LLC
If I “remove” a link within my main navigation menu, can I bring it back easily? We want to take a page offline while we are reconfiguring it.
Thanks!
WPBeginner Support
Yes, you can easily add and remove menu items and if the menu items even if the item is not currently on the menu. You would want to ensure you clear any caching on your site so your visitors see the up-to-date menu.
Administrador
Akanksha
Thank you ..This was very helpful to me
WPBeginner Support
Glad it was helpful!
Administrador
Sunny
A very basic question. How can you link your website URL to your homepage? Meaning, having the website URL, also as your homepage section in the menu. Thanks
WPBeginner Support
You could either set the menu to the homepage you have set under Settings>General for your site or create a custom URL and add your domain there to point to your homepage.
Administrador
Lisa
I’m confused about how to get my posts where I want them to go… I have a recipe blog. On the top of my site, I have categories you can click such as “Dinner recipes” and “Side dishes”… How do I get my specific posts to go on those specific pages when you click on the title at the top of the page?
aberry
Is there a way that when you add a category it automatically adds the sub categories?
WPBeginner Support
You would want to take a look at one of our older articles covering this below for showing subcategories on the parent category page:
https://www.wpbeginner.com/wp-tutorials/display-subcategories-on-category-pages-in-wordpress/
Administrador
HJ
Very basic question, but how to enable menu on a subpage? I designed some subpages, but the menu is not visible on top. In my main pages the menu is visible. How to enable the menu to make it visible on the sub-pages?
WPBeginner Support
You would want to reach out to the support for your specific theme, it sounds like your theme may remove the menu for certain pages. If you reach out to the support they should let you know how to add the menu back.
Administrador
Janien
I’m trying to get a navigation menu that is sticky and is not transparent. I’ve tried everything. Am I allowed to change the navigation bar in a theme?
WPBeginner Support
You are but it would require some coding knowledge, we would recommend reaching out to your theme’s support and they can normally assist.
Administrador
Miranda
I have made a navigation menu but it won’t show up on the mobile site and when I go to navigation menu settings it does not have mobile menu as an option. Do you know how I can fix this or do I need to find a different theme?
WPBeginner Support
You would need to reach out to the support for your specific theme for it not displaying properly and they would be able to assist.
Administrador
sadik
Thenk you Wp Begginer
WPBeginner Support
You’re welcome
Administrador
Nanyc
This helped a lot. I wanted a heads up before I started. Presented very well.
WPBeginner Support
Glad our article was helpful
Administrador
atta
Thanks for the detailed guide. I have a question: how can we add a navbar (for a landing page) which links the landing page sections/elements instead of navigating to other pages. An example is Wikipedia. On any Wikipedia page, you can click on the name of the section and it will immediately go down to that section.
WPBeginner Support
For that, you would want to use anchor links which we cover in our article below:
https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/
Administrador
Gina
Hi,
I created categories and added to my menu so that once a reader clicks they can find all the blog posts on that category. My problem is that I don’t want the blog name to appear at the top of the page, that is, Blogging category => Blogging category description => blog posts, how do I remove that?
WPBeginner Support
That would depend on your specific theme’s styling. If you reach out to your theme’s support they should be able to assist with changing what is shown
Administrador
wan
i try to add menu item on my menu structure. even when i save menu, the website doesn’t change. why?
WPBeginner Support
You would want to ensure your site or your hosting provider does not have a cache that could be causing your issue.
Administrador
Keith
Great resources
WPBeginner Support
Thank you
Administrador
Linda McMillan
Hello, I am using Elementor and OceanWP. I set up a custom link in my menu so that when clicking on it goes to the Home page. How can I make it go instead of just to the Home page, but down the page to a certain section? I appreciate your help.
WPBeginner Support
You would want to take a look at making an anchor link: https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/
Administrador
Annie
Pretty much there with the navigation. One question though, I have one point in my navigation “products” from there it splits into 3 other sections (drop down menu coming up). I don’t want visitors be able to access this product page as it will be empty, I want them to choose directly from the drop down menu instead of accessing the products page first. So products will be still displayed in the navigation but will be inaccessible, visitors have to click onto the drop down menu to choose what they are after. How do I do this? I m I m removing the whole products section it wont be displayed in the navi anymore, how can I make the products page inaccessible?
WPBeginner Support
You can create a custom link under Appearance>Menus titled Products and link it to either a different page or # which should keep the users on the same page they are on.
Administrador
Ishan
Thank you for your help.I was facing the same problem
Terry L. Cooper
How old is this anyway?? I’m not seeing any of this on the WP page.
WPBeginner Support
The steps in this article should still work for WordPress.org sites, are you on WordPress.com? https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Administrador
Azizi
Sorry sir, which WordPress theme you’re using on WPbeginner.com?????
WPBeginner Support
We are using a theme we created for our site built on the Genesis Framework, for more on what we’re using on our site you would want to take a look at our blueprint page here: https://www.wpbeginner.com/blueprint/
Administrador
Inzamam ul haq
It really helped me. very informative.Thanks
Natalie V
Hi! Thanks so much for this post. It helped me a lot. I have the “Karuna” theme. Whenever I add more menu options (I have 4) they are displayed in two row. I would like them all to be in one row. Is there a way to fix this? Thank you so much!
David
Needed to link a buy now button to woo commerce cart page. Spent two days going in circles. Tried to contact woo with little success. Then found you guys who helped solve the problem.
Often it is the little things which can stop us in our tracks. A big thank you for the simplified set of clear instructions.
Elliot Kershaw
Hello,
I am making a website with Ocean WP and Elementor, however I am unable to see the menu at the top of all of my pages. It only appears at the top of the home page. So people can navigate to any page from the home page, however if anyone wanted to navigate back to the home page or to another page from there, it would tricky. Do you have a solution for this? Thank you!