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!
Lindsey
Thank you for these instructions, very helpful! I have a question that I think relates back to my menu but I’m not totally sure. When I click on a menu item from the home page the site address adds “aboutme” between the main address and the menu page. I do not have anything called “about me” on my site. I don’t understand why it is adding this extra piece of information to each page. Any suggestions on how to remove this “aboutme” information?
hans
Thank you.
I learned much knowledge.
Karen
Hi. I am using Ocean WP and Elementor.
I have a menu organized, but there on one of my Nested menu dropdown sections I want the FIRST category NOT to be linked to a page (I tried to remove the link but I failed).
The nested section is as follows: THERAPY (on top)>Individual>Group
I don’t want THERAPY to lead to a page, it’s blank, it’s just a category I guess. I’ve done this in my previous site but I can’t for the life of me remember how to do it!
I did create a “page” called Therapy so it would show up in the menu options…help me obi wan kenobi you are my only hope!
Dr Karen
WPBeginner Support
Hi Karen,
Add your top link Therapy as a ‘Custom Link’. In the URL field enter # sign and click add to menu. Adjust its position in the menu and then click on Save Menu button.
Administrador
Eric Wenocur
Aha, that’s how you do it! Thanks, great tutorials!
WPBeginner Support
You’re welcome, glad you like our content
saurabh
Hello,
We use the two menu system (i.e. primary/top & main/secondary menu) across our websites. And the top/primary menu does not appear on the mobile website.
One of our clients, want both the menus to be visible on the mobile site. Any suggestions on how to do that?
(The website is running on newspaper theme, if that helps.)
Ahmed
Suppose I want to post many articles related to android. Should I create a android page or android category in my wp menu.
WPBeginner Support
Hi Ahmed,
Categories are better to sort your content into different topics. You can add a category to your website’s navigation menu and then it will show all posts filed under that category.
Administrador
Lerissa
Hi – Thanks for providing this.
I don’t have any items in my Pages section, which is strange, because my site has several. Did I configure a setting wrong?
Lerissa
WPBeginner Support
Hi Lerissa,
What happens when you click on ‘View All’ under pages?
Administrador
Tom
Thanks for this illustration.
Manish Ransubhe
hi sir
thank you, i have started my new WordPress blog and I Stuck on the menu I don’t know how to add menu thanks for your this useful post and Your site helped me to launch my website.
WPBeginner Support
Hi Manish,
Glad you found this guide helpful. You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
Administrador
Cyndi Jarvis
Hi and thanks for your support. I have a website almost completed, pretty basic but want to link the menu items to the page that relevant text exists and somehow be able to take the user back to the main menu with a back button. Can you please help.
Thanks
WPBeginner Support
Hi Cyndi,
The tutorial above allows you to link to pages and add them to navigation menus. Seems like you want something a little different, can you please provide more details?
Administrador
cyndi
Thanks for trying to help. I am not looking for anything unusual with my menu in the website. I have menu items setup as Home, About Us, Services, Contact. The menu name is First Menu and set to primary. What happens is that I click on Home and the page flashes but I don’t go anywhere. This happens with all of the menu items I click on. Any suggestions what I have setup incorrectly?
Thanks
WPBeginner Support
Hi Cyndi,
You can try this. Go to Apperance » Menus page and click on create a new menu. The following the instructions in the article create new menu by adding your pages from left column to the right. After that select the location for your menu ‘Primary’ and then click on save menu button.
If this doesn’t solve your issue, then preview your website with a default theme. If your navigation menu works as expected with the default theme, then there may be some issue with your current theme. Hope this helps.
Administrador
Regina Clarke
This was so helpful and it worked beautifully on my laptop. But on my iPhone the submenu categories I dropped into my Blog menu (which all show up indented as they should) also include the description I created of the category. On my laptop that appears on the archive page for each category but on the phone it appears in the dropdown, which makes it all look muddy. Is there a way to create yet another indent for just the descriptions under each category, effectively nesting three levels?
Thanks very much for any suggestions.
Jillian
Hi there, I have created a nested menu which looks great in the desktop version, but when it gets to the mobile version everything nested is shown on the menu at once! It creates a super long menu page. I have a responsive theme and am unsure if can be fixed.
Amber Shock
Thanks for making such an easy to follow video. It helped a lot and I quickly got my issue figured out.
Bartek
I have problems that wordpress doesn´t let me add any category any more or even is deleting and changing place of some which were once added. Anybody know what can be a reason?
Ahmed Azeem
My website don’t have option of primary, secondary but main and footer menu. I want to add top menu in my website can you please guide me how to add top menu. also in my portfolio page whatever items I am adding is not showing so kindly help me out regarding that. Thanks in advance.
John
I thought this was an explanation about how to add a navigation menu in your WordPress site, but it’s missing the vital code to actually add it to your website. This is the dumbest tutorial (or article title) I have ever seen.
WPBeginner Support
Hi John,
You may want to check out our tutorial on how to add custom navigation menus in WordPress.
Administrador
Shibani
I have a site where I want to display custom menu which is a category – like travel. It works fine, but it displayed – Category – Travel above posts. How can I hide that? I’m using wordpress.com and using free plan.
Prachi
Suppose my website is example.com
I want to create a tab called HOME and place it menu.
Whenever I am creating this HOME, the url does not accept example.com
It is becoming as example.com/home.
What should I do?
WPBeginner Support
Hi Prachi,
WordPress already has a navigation menu that you can use. On the navigation menus screen click on the pages and then click on View All. There you will see all your pages and an item called Home. Select home and then click on add to menu button.
Administrador
John
I have followed the above instruction. My menu though will not actually appear on any of the sites pages. May I have some guidance please ?
John
Haitham Alnaqeb
Have tried a different themes? Sometime the themes you are using is not supported to some of these futures.
Ike Ezeani
I created a second dropdown menu but when I click the main menu I see the dropdown but it takes to a blank page. Please help.
Stephen B
Hello,
When I log into my wordpress, my edit menu looks completely different and I am having a significantly difficult time adding menus and customizing my site because of this. Can you help me?
Malkeet
Hi, Thanks for the nice detailed explanation of adding menu, but how to call this menu ????
Husnaa
Thanks for helping me out.
Keep helping others.
Lucy
Hi, I’m really struggling with navigation for a clients site and am not sure how to explain what i need. When you click on a Top-Level menu item, I want it to open an additional menu underneath. Each Top-Level will have a different sub menu that stays activated whilst you are in that area of the site.
Like on this website
When you click on say “Commercial Solar” another menu appears and allows you to browse the commercial solar area. The top menu stays selected throughout.
Any help you can offer would be great! Thanks Lucy
WPBeginner Support
Hi Lucy,
Please see our article on how to add a menu item without linking to a page.
Administrador
David Blaska
I want to link my pages to headers on the home page that synopsize those pages. How to do? (Like “Our History,” “Who We Are,” etc.) I have a page for each of those but a small blurb on each on the Home Page. Would like for visitors to click on the header of each of those.
Michael
Hi, I need for my main navigation window to ‘push up’ as opposed to ‘drop down’. I’m using Google Doubleclick Ad Exchange for display ads and they claim that my drop down menu could create false clicks on ads. Is there anyway that I could make it push up?
Emma
Thank you so much for this, been trying to figure out how to create drop down menus, this really helped!
isa alshabany
hello
I Am A Beginner Not Professional , I Am Using A Template Theme & You Can See It In My Site .. I Have An Arabic Menu .. I Need To Create An English Menu Underneath It So English Speaking Browser Can Access The English Pages .. Thanks A Lot .. Isa
Haitham Alnaqeb
I think you need to have multi WordPress websites and insert a code in your landing page to redirect your visitors based on their computers language or countries. Each of these website will have a WordPress with its language because it is does not make sense to me if I log in into an Arabic websites that has only Menu in English or the opposite.
Steven Denger
Helo – I have a subdomain for . I really do not use it except to store pages. On one experiment, I use a css code for a page to hide header and navbar. But since then when I removed the css code and tried to create a menu, the nav bar will not show. I am quite familuar with wordpress menus and how to place them. But I just cannot get this one to show. I exported some pages into this subdomain and tried to create a menu – but it is no use – it just will not show. This is what gets me about wordpress – you never know when or how it is going to go haywire. Would ou know what the matter is?
Paul Nye
How can I add a drop down menu in an area of a page other than my sidebar widget?
Mary
HI there,
I was actually wondering if the custom menu takes the place of the default navigation menu. How does it effect the existing default menu and its nesting?
I would have to remember to add my pages to the custom menu.
It may sound silly, but this seems very complicated to me.
I wanted to make a few pages unclickable (like “reviews”) and I like the eventual idea of sub nesting
Thanks for putting so much energy into this article. Mary
munir
Hi all
how could i add a menu on a certain page of my website? (i don’t need the menu to appear on the home page or the front page)
thank you all
Asir
You need to install and activate plugin called (Page Specific Menu items)
How to make this plugin work?
Create a menu from appearance > menus
Select the menu you want to use from settings > PS MenuItems > Select Menu
Assign the menu to menu location from appearance > menus
Check the items you want to hide from pages > edit > Page Specific Menu Items
View the page and the selected items should be gone.
jenijeya
super to quickly understand
Lucas Phan
Hey bro, i have a question for you.
How to create side menu like this
thank bro.
WPBeginner Support
Can be achieved using CSS and JavaScript. See our article on how to add a slide panel menu in WordPress themes, and try using it as a starting point.
Administrador
Zac
Hi, I don’t see all those fancy options (e.g., drag and drop sub menus etc) on my FREE wordpress site. I wonder if the information you gave is for the premium wordpress version. Thanks
WPBeginner Support
Hi Zac,
These options described in the tutorial are available in self hosted WordPress.org sites. You are probably using a free WordPress.com website. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Bridget
Thank your for this video. It all seems very simple, but for me when I open wordpress, I do not have the option to choose “appearance.” There is just a link for “menu.” I have created a menu that appears on my blog, but I cannot add categories to it, so the menu is basically useless. When you click on, say, “travel planning” in the menu, it won’t take you to all the article about travel planning, just to something random. I am working on an 11″ laptop, and I read something that said possibly the issue is the size of the screen? If so, I am not sure how to work around that since I travel long term and this is all I have to use. Do you have any suggestions? I really want the menu to work so people can find what they’re looking for! Thanks! Bridget
Hatem Tahir
Hello,
under the menu theme location, i’m not seeing ‘Primary’, ‘Secondary’, thus the pages I added were not shown on the main header, can you please help.
Thanks much
sreekanth
thanks for the guide and how to create the catagerious (if you know please create the video)
Deepak Raghav
Hello Sir, I wan t to create more navigation menu in my wordpress themes. Please tell me how to add more
Dylan
Thank you for the insight, found this very helpful.
Question,
I currently have a menu button link to a certain area of my home page, for instance I named a section/column “#portfolio” so the page will scroll down to that section when the menu button “Portfolio” is clicked.
My problem is that when the user goes to a menu page that loads a new page, my portfolio button wont go back to the home page, its just a dead link/ menu button.
Mija
Great-thank you sooooo much for making it so succibt, precise, clear and understandable!!!
Rafi sultan
Really nice ,every step s defined clearly ,nice material.
thanks
Carrie
Thank you for the information! Understand
1) If I can create different menus but may I know if I can tailor make the location (even if the theme doesn’t provide it) ?
OR
2) Create a double line menu bar at the primary menu (instead of hide those tabs that don’t fit in one line)
I’m using pique theme at wordpress.com
Many thanks and really look forward to a solution.
Cheers,
Carrie
Jennifer
This helped me so much! Thank you! Thank you! Thank you!
lisa thomson
Thanks for this informative how to, article, Sayed. I have a question. I changed my menu and for some weird reason it’s now overlapping into my side bar. So, it’s uneven on the top. Do you know how that can be corrected? I appreciate any tips you have.
Dr.sunita karmankar
Hi, Thanks for the nice detailed explanation of adding menu, it really helped me
khalid mehmood
It really helped.
thanks.
Laxmikant Bhumkar
Super excellent information on a navigation menu. Very easy to learn.
Chirag
Really nice. Go it very easily. Thank you a lot!
You Rock
pinku
very very useful information…now it is easy to create navigation menu
thanks a lot
Sheryl Roger
Excellent material. Every step is defined so clearly that even a novice can implement this step without any difficulty. Thanks for sharing such material as it will be very helpful for beginners in website development.
Francisco
Nice article.
Thanks!