🎉 AgentWP is now in Public Beta Testing.
A well-designed navigation menu is your site's compass. It guides visitors through your content, improves user experience, and enhances overall site usability.
In WordPress, adding a menu is easy and often requires no coding. You can do this via the admin dashboard, the Customizer, or the Full Site Editor.
In this guide, we'll cover step-by-step instructions for each approach. By the end, you'll be able to add a menu using the best method for your setup.
How to Add a Menu in the Admin Dashboard
If you’re using a third-party theme, then the most common way to add menus is through the admin dashboard. It gives you detailed control over your navigation, which is great if you like to use a familiar interface and fine-tune things yourself.
Note: In some themes, you might not see the Appearance > Menus option. In that case, you’ll need to use the Full Site Editing (FSE) editor to add your menu, which we’ll cover later.
Step 1: Create a New Menu
To start creating a menu, open your WordPress dashboard and head over to Appearance > Menus. You should see an option to create a new menu. Enter a name in the "Menu Name" field that makes sense to you. Don’t worry, this won’t be displayed on your site.
Once you’ve named your menu, click “Save Menu.” This sets up a blank slate where you can start adding items.
Step 2: Add Pages to Your Menu
In the "Add menu items" section, you’ll see options like Pages, Posts, Custom Links, and Categories. For now, let’s focus on adding pages.
By default, the most recent pages are shown. To see all pages, click the “View All” tab. Select the pages you want in your menu by checking the boxes next to them. If you want to include all top-level pages automatically, simply check the "Select All" box.
After making your selections, click "Add to Menu." This will display your chosen pages in the "Menu Structure" section.
Step 3: Organize Menu Structure
In the "Menu Structure" section, you can arrange the order of your menu items by dragging and dropping them. To move a page, simply click on it and drag it to your desired position.
If you want to create a sub-item, or drop-down menu, drag the item slightly right under another item. This will automatically nest it, like creating a hierarchical structure. Doing so will organize your menu in a way that makes sense for your site’s navigation.
Step 4: Choose Your Menu Location
The next step is to decide where the menu will appear on your site.
Scroll down to the "Menu Settings" section to see the different display locations. These may vary depending on your theme but could include Primary, Footer, or Social locations.
Select your preferred location. Don’t forget to save your changes.
Step 5: Additional Customizations
WordPress offers several customization options to tweak your menu.
If you need to edit a menu item, click the downward arrow next to it to expand the item settings. You can change labels or even remove items entirely by clicking “Remove.”
You can also add custom links. Just click the "Custom Links" tab, enter the URL and link text, and then click “Add to Menu.” This is useful if you want to add links to external websites or to specific content within your site.
To add categories, select the "Categories" tab and follow similar steps as adding pages.
If you want to create drop-down menus, drag an item and position it under a parent item.
Don’t forget to save the changes.
Note: Menus in WordPress are quite flexible. In the menu editor, items are listed vertically, but when displayed on your site, they can appear either vertically or horizontally, depending on the theme and location you choose. Many themes support multiple menu locations, so you can create different menus for different parts of your site, such as the header, footer, or sidebar.
How to Add a Menu in the Customizer
The Customizer is a great tool if you're looking for a more visual way to create and edit your WordPress menu. It’s especially handy if you're using a classic theme or if Full Site Editing isn't activated on your site.
Through the Customizer, you can see changes in real time before you commit to them. It also works well with most themes. You can experiment with different layouts, make quick edits, and test changes without worrying about messing up your live site.
Here's how to add a menu using the WordPress Customizer:
Step 1: Access the Customizer
Go to Appearance > Customize in your WordPress dashboard. This will open the Customizer, where you can see a live preview of your website.
Step 2: Open the Menus Section
In the Customizer, you’ll see different options on the left-hand side. Click on the “Menus” option. This is where you can manage your site’s navigation menus.
Step 3: Check for Existing Menus
When you open the Menus section, you might see a menu that has already been created for you. This is usually named something like "Primary" or "Main Menu."
If you see this, you can jump to the next step to start adding links to this menu. If there is no existing menu, you will need to create one.
Step 4: Create a New Menu
If you don’t see an existing menu, click the “Create New Menu” button.
Then, enter a name like "My Menu." This name is for your reference only and won’t be displayed on your site.
Step 5: Assign Menu Locations
After adding a menu name, you’ll need to assign a location.
Under "Menu Locations," you'll see a list of options for where your menu can appear. These vary by theme but often include choices like Primary, Header, or Main Menu. Select at least one that fits your layout vision.
Note: The social links menu option is for social media icons, not your main navigation. Do not select this when creating your main menu.
Step 6: Add Items to Your Menu
Click "Next" and then "Add Items." You can add custom links, pages, posts, categories, and even tags to your menu.
Step 7: Customize the Menu Structure
Rearrange your menu items by dragging and dropping them in any order you want.
To create a drop-down menu, drag an item slightly under another item to create a hierarchical structure. This will help you organize your menu and make it more user-friendly.
Step 8: Save and Publish
Once you’re done organizing your menu and assigning its location, click the “Publish” button at the top of the Customizer to save the changes. Your new menu will now be live on your site.
How to Add a Menu in Full Site Editor
Full Site Editing (FSE) is a new feature in WordPress that extends the block editor to your entire site. It's great for those who want to design their whole website in one place and see changes in real time.
With FSE, you can customize your theme, templates, and navigation all at once. It's efficient and gives you more control over how your site looks and functions.
To add a menu in FSE, follow these steps:
Step 1: Select a Theme and Access the Full Site Editor
To get started, go to Appearance > Editor in your WordPress dashboard. This opens the Full Site Editor. Look for the Navigation tab on the left side. This is where we'll add and edit our menu.
Click the edit icon on the Navigation tab to start customizing your theme.
Note: Check if your theme supports Full Site Editing. Not all themes do, so if you don't see the option above, use the Customizer or WordPress admin to add your menu instead.
For this guide, we're using the Twenty Twenty-Four theme, but the process should be similar for other FSE-compatible themes.
Step 2: Add a Navigation Menu Item
Click the + icon to open the block inserter. Look for the "Navigation" block and select it. This is your menu's foundation.
Now, you can add different elements to your menu, such as page links or custom links. Let’s say you want to add a search bar. Just look for the “Search” widget from the options and click it to add it to your menu bar.
Step 3: Customize the Menu Style
If you want to customize a menu item, simply click on it and look for the “Style” tab on the right side of the screen. Here, you can adjust the typography, height, spacing, and other styling options to match your site’s design.
And if you want to add sub-menus, you can do this from the block toolbar. Just drag the items under parent items, similar to creating a drop-down menu.
When you’re done, click “Save.” That’s it!
How to Add Menus to Sidebars and Footers (Optional)
Sometimes, you might want to add menus to sidebars and footers to make your site more user-friendly. Putting menus in these areas gives your visitors easy access to important pages, no matter where they are on your site.
If you have a lot of content or want to highlight specific areas of your site, then you might want to try this. Follow these steps:
Step 1: Open the Full Site Editor
First, go to Appearance > Editor from your WordPress dashboard to open the Full Site Editor (FSE).
Step 2: Select a Template or Template Part
On the left-hand navigation bar, click Templates or Template Parts.
If you're adding the menu to a specific page layout, choose Templates and select a template like "Single" or "Page." If you're adding the menu to a consistent site element like the Sidebar or Footer, click Template Parts and choose the appropriate part, such as "Sidebar" or "Footer."
Step 3: Open the Editor for the Selected Template Part
Let's say you choose "Footer" and click to open the editor where you can customize its content. Add blocks to personalize the footer area as needed.
Step 4: Add the Navigation Block
Click the + icon to open the block inserter and search for the "Navigation" block. Drag and drop this block into your selected area, like the Sidebar or Footer.
Step 5: Customize Your Menu
Once the Navigation block is added, you can start adding items like pages, custom links, categories, or posts. Simply click on the + Block Inserter.
Then, use the settings on the right-hand sidebar to adjust the menu's appearance, such as typography, spacing, and alignment. You can also drag and drop menu items to rearrange them.
Step 6: Save and Publish
After customizing your menu, click “Save” at the top right corner of the editor to publish your changes. Your menu will now appear in the selected Sidebar or Footer area of your site.
Note: Any changes made here will reflect on the original navigation bar if you’ve created one earlier.
Adding a Navigation Menu in WordPress - FAQs
How do I make my menu visible in WordPress?
To make your menu visible on your WordPress site, you need to assign it to a menu location. Go to Appearance > Menus, create or edit your menu, then select a location like Primary, Header, or Footer Menu.
How do you link your pages to your navigation menu on WordPress?
To link pages to your navigation menu, go to Appearance > Menus, select the pages you want to add from the left column and click “Add to Menu.” Drag and drop to arrange them and click save when done.
How do I add a toggle menu in WordPress?
To add a toggle or mobile menu in WordPress, make sure your theme supports responsive design. This feature is usually included in most modern themes, which adjust the menu for smaller screens like tablets and mobile devices.
That’s It!
Congratulations - you’ve just learned how to add navigation menus to your WordPress site!
As you get comfortable, consider adding more complex features. Create sticky menus that stay visible as users scroll, add interactive elements, or set up conditional menus that change based on user roles or login status. These tweaks can surely enhance your site's usability. Go ahead and try it.
Always remember that a well-designed menu is key to a good user experience. Your visitors will appreciate being able to find what they need quickly.
