A well-structured navigation menu is essential for guiding visitors through your WordPress site and ensuring they can easily find the information they need.
Whether you are setting up your first website or trying to improve the user experience on an existing one, learning how to add and customize a navigation menu is an important skill.
WordPress comes with a drag and drop menu interface that you can use to easily create header menus, menus with dropdown options, and so much more.
Over the years, we have created a variety of menus for our different brands, giving us firsthand experience in designing menu styles. We’ve learned which types of menus work best for different businesses, what links and pages to include, and how to optimize navigation for a better user experience.
In this step-by-step guide, we will show you how to easily add a navigation menu in WordPress.
What is a Navigation Menu?
A navigation menu is a list of links pointing to important areas of a website. They are usually presented as a horizontal bar of links at the top of every page on a WordPress site.
These menus give your site structure and help visitors find what they’re looking for. Here’s how the navigation menu looks on WPBeginner:
WordPress makes it really easy to add menus and sub-menus. You can add links to your most important pages, categories or topics, blog posts, and even custom links such as your social media profile.
The exact location of your menu will depend on your WordPress theme. Most themes will have several options, so you can create different menus that can be displayed in different places.
For instance, most WordPress themes have a primary menu that appears at the top. Some themes may also include a secondary menu, a footer menu, or a mobile navigation menu.
That said, let’s see how you can create a custom navigation menu in 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
Creating Your First Custom Navigation Menu
To create a navigation menu, you need to visit the Appearance » Menus page in your WordPress admin dashboard.
Note: If you don’t see the ‘Appearance » Menus‘ option on your site and see only ‘Appearance » Editor‘, then that means your theme has Full Site Editing (FSE) enabled. You can click here to skip ahead to the FSE section below.
Once you’re there, provide a name for your menu, like ‘Top Navigation Menu’, and then click the ‘Create Menu’ button.
This will expand the menu area, and it will look like this:
Next, you can choose the pages you want to add to the menu. You can either automatically add all new top-level pages or you can select specific pages from the left column.
First, click the ‘View All’ tab to see all your site’s pages. After that, click the box next to each of the pages you want to add to your menu, and then click on the ‘Add to Menu’ button.
Once your pages have been added, you can move them around by dragging and dropping them in the ‘Menu Structure’ section.
This way, you can change their order and rearrange them.
Note: All menu items are listed in a vertical (top to bottom) list in the menu editor. When you put the menu live on your site, it’ll either display vertically or horizontally (left to right), depending on the location you select.
Most themes have several different locations where you can put menus. In this example, we’re using the Astra theme, which has 5 different locations.
After adding pages to the menu, select the location where you want to display it and click the ‘Save Menu’ button.
Tip: If you’re not sure where each location is, try saving the menu in different places, then visit your site to see how it looks. You probably won’t want to use all the locations, but you might want to use more than one.
For more details on this, you may want to see our tutorial on how to create a vertical navigation menu in WordPress.
Here’s our finished menu on the site:
Creating Drop-Down Menus in WordPress
Drop-down menus, sometimes called nested menus, are navigation menus with parent and child menu items.
When you run your cursor over a parent item, all the child items will appear beneath it in a sub-menu.
To create a submenu, drag an item below the parent item and then drag it slightly to the right. We’ve done that with 3 sub-items beneath ‘Services’ in our menu:
You can even add multiple layers of dropdowns so that your sub-menu can have a sub-menu. This can end up looking a bit cluttered, and many themes do not support multi-layer drop-down menus.
For more detailed instructions, please see our tutorial on how to create a dropdown menu in WordPress.
Here’s the sub-menu live on our demo site:
Adding Categories to WordPress Menus
If you’re using WordPress to run a blog, then you may want to add your blog categories as a drop-down in your WordPress menu.
We do this on WPBeginner and have multiple categories like news, themes, tutorials, and more.
You can easily add categories to your menu by clicking the Categories tab on the left side of the menu screen. You may also need to click the ‘View All’ tab to see all your categories.
Simply select the categories you want to add to the menu, and then click the ‘Add to Menu’ button.
The categories will appear as regular menu items at the bottom of your menu.
Next, you can drag and drop them into position. For example, we’re going to put all of these categories under the Blog menu item.
For further instructions, please refer to our beginner’s guide on how to add topics in WordPress navigation menus.
Here’s how different categories appear in the navigational menu on our demo site:
Adding Custom Links to Your WordPress Navigation Menus
Aside from categories and pages, WordPress also makes it super easy to add custom links to your menu. You can use it to link to your social media profiles, your online store, and other websites that you own.
To do this, you’ll have to use the ‘Custom Links’ tab on the Menu screen. Simply add the link along with the text you want to use in your menu and click the ‘Add to Menu’ button.
You can even get creative and add social media icons to your menu or call-to-action buttons to get more conversions.
Editing or Removing a Menu Item in WordPress Navigation Menus
When you add pages or categories to your custom navigation menu, WordPress uses the page title or category name as the link text. You can change this if you want.
Any menu item can be edited by clicking on the downward arrow next to it.
You can then change the menu item’s name from here. You can also click ‘Remove’ to remove the link from your menu altogether.
If you are struggling with the drag-and-drop interface, then you can also move the menu item around by clicking the appropriate ‘Move’ link.
Adding Navigational Menus in Full Site Editor (FSE)
The new full site editor allows you to customize your WordPress themes using the block editor. It was released in WordPress 5.9 and enables you to add different blocks to your templates to create a unique design.
To add a navigational menu using the full site editor, visit the Appearance » Editor from your WordPress dashboard.
We’ll use the default Twenty Twenty-Three theme for this tutorial. For more details, you can see our article on the best WordPress full site editing themes.
Once you’re in the editor, go ahead and click on the ‘Navigation’ tab to expand it.
This will open some new settings in the left column.
From here, simply click the ‘Edit’ icon at the top.
This will launch the full site editor on your screen, where you can click the ‘+’ icon to add a navigation menu item.
A prompt will now open up, and you can select an option from the dropdown menu.
However, if you want to add a custom link, then you can add a label and URL for the navigation menu item in the block panel. You can also add a search option to your menu.
Once you have added an item, switch to the ‘Styles’ tab from the column on the right.
You can now change the typography, appearance, height, spacing, letter case, and text decoration for your menu items.
You can also add a submenu by clicking on its icon in the block toolbar.
When you’re done, you can preview the changes to see how the menu looks in real time. Then don’t forget to click the ‘Save’ button at the top.
Adding WordPress Menus in Sidebars and Footers
You don’t have to just stick to the display locations for your theme. You can add navigation menus in any area that uses widgets, like your sidebar or footer.
Simply go to Appearance » Widgets and then click the ‘Add Block’ (+) button at the top and add the ‘Navigation Menu’ widget block to your sidebar.
Next, add a title for the widget and choose the correct menu from the ‘Select Menu’ dropdown list.
When you’re done, simply click the ‘Update’ button.
Here’s an example of a custom WordPress footer menu built on our founder, Syed Balkhi’s website.
Going Further with Navigation Menus
If you want to create a truly epic menu with loads of links, we’ve got a tutorial on how to create a mega menu in WordPress.
This lets you create a drop-down with lots of items, including images.
Mega menus are a great option if you have a large site, such as an online store or news site. This type of menu is used by sites like Reuters, Buzzfeed, Starbucks, etc.
Video Tutorial
If you’d prefer to watch this tutorial, check out our video below:
FAQs About WordPress Menus
Here are some of the most common questions beginners ask about WordPress navigation menus.
1. How do I add a homepage link to a WordPress menu?
To add your homepage to a navigation menu, you’ll need to click the ‘View All’ tab under Pages. From there, you should see your homepage.
Check the box next to ‘Home’ and click ‘Add to Menu.’ Remember to save your changes.
2. How do I add multiple navigation menus in WordPress?
In WordPress, you can create as many menus as you like. To place a menu on your website, you’ll need to add it to one of your theme’s menu locations or to a widget area, as we showed above.
If you want to add multiple navigation menus to your WordPress site, first create the menus following our tutorial above.
To place them on your site, click on the ‘Manage Locations’ tab.
From here, you can select which menu you’d like to display in the menu locations that are available in your theme.
If you want to add a new menu location to your site, see our tutorial on how to add custom navigation menus to WordPress themes.
We hope this article helped you learn how to add a navigation menu in WordPress. You may also want to check out our guides on how to style navigation menus in WordPress and how to create a sticky floating navigation menu in WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
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.
Admin
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.
Admin
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?
Admin
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.
Admin
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?
Admin
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.
Admin
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.
Admin
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.
Admin
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.
Admin
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.
Admin
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!