How to use navigation menus in Wordpress
Jump to a section on this page:
- What is a navigation menu?
- Creating your first menu
- Adding pages to your navigation menu
- Adding categories to your navigation menu
- Adding custom links to your navigation menu
- Arranging items in your navigation menu
- Creating drop-down menus
- Selecting a menu location
- Adding your menu to your site
- Editing menu items
- Add a navigation menu to your sidebar
- Add a "home" link to your navigation bar
- Add a menu item without linking to a page
What is a navigation menu?
A navigation menu allows your site visitors to easily navigate and access different pages/content you have on your website. In Wordpress, navigation menus are super easy to create and manage. They're also very versatile and can be used in many different ways, all of which we'll cover in depth in this article. You'll be able to add pages, categories, posts, custom links, and other content types to your navigation menu, as well as customize where in your theme you want your menu(s) to display.
Creating your first menu
In your Wordpress dashboard, go to Appearance > Menus.
This will bring you to the Menus screen, which is divided into two columns. The column on the left has your pages, categories, and custom links tab (there may be additional areas depending on your theme and plugins). The column on the right is where you can add and adjust your menu items.
Under Menu Name, give your menu a name (such as "Main Menu") and then click Create Menu. This will expand the menu area and give you some more options.
Adding pages to your navigation menu
Click here for information about pages and how to create them.
To add pages to your navigation menu, place a checkmark by the pages in the left column that you want to add. Then click Add to Menu.
The pages you added will appear in the column on the right under Menu Structure.
Adding categories to your navigation menu
Click here for information about categories and how to set them up.
To add categories to your navigation menu, click the Categories tab in the left column. Place a checkmark by the categories want to add. Then click Add to Menu.
The categories you added will appear in the column on the right under Menu Structure.
Adding custom links to your navigation menu
There may be times when you want to link to a page that is not on your website. For example, you may want to add a link to your social media profile or link to your Etsy shop. This can easily be done with the custom link option.
To add a custom link, click the Custom Link tab on the left. You will see two fields. The first field is for your URL, where you will need to add the URL of the page you want to have in your menu. The second field is called Link Text, and this is where you'll add the text for your link (this is what will display in the menu on your live site).
Note: when adding your URL, be sure to include the http:// or https://, otherwise you'll have a broken link.
Arranging items in your navigation menu
Each menu item that you add to your menu is arranged in the order you added them. To rearrange them, simply drag and drop a menu item to adjust its position within the menu.
Creating drop-down menus
A drop-down menu is a submenu that appears below a parent menu item when it is hovered over. Using drop-down menus will simplify your navigation menu and make it easier for visitors to your website find the information they are looking for.
In the example below, "About" is the parent item and The Team, Services, and Clients are sub items.
To create a drop-down menu, drag a menu item right beneath the parent item. Then drag it slightly to the right. That will create a sub-menu.
You can have as many menu items as you want underneath a parent item. On your live site, the sub-items will appear when you hover your cursor over the parent item.
Selecting a menu location
Now that you have your menu configured exactly how you want, it's time to add it to your site! If you are using a 17th Avenue theme, you will have two menu locations, Primary Navigation and Secondary Navigation. You must choose one of these before your menu will display anywhere on your site.
The specific location of these menu locations will vary from theme to theme. In most of our themes, the Primary Navigation Menu will display below the header area and the Secondary Navigation Menu will display above the header. But in some themes, it may be different. You can check the Theme Documentation for your theme to find out exactly where the menu locations are, or just choose one location and see for yourself where the menu appears on your site. You can easily come back and change the location if you aren't happy with it!
Adding your menu to your site
Congrats! Now that you have created a menu, added your pages/categories, and selected a menu location, it's time to publish your menu. Click Save Menu on the right. After you've saved, your menu will appear on your site.
You can have as many menus on your site as you need. A few of our themes utilize both the Primary and Secondary navigation menus at once, such as Amelia.
Additional menu tips & tricks
Editing menu items
When you add pages or categories to your navigation menu, Wordpress automatically uses the page title or category name as the link text. But you can change it! Simply click the arrow next to the menu item you want to edit (circled below).
Clicking the arrow will expand the menu item and allow you to change the link text.
Add a navigation menu to your sidebar
In addition to the menu locations set by your theme, you can also add navigation menus to your sidebar!
Here's how to do it: create a new menu, add your pages/categories, and do not assign a menu location to it. Click Save Menu. Then go to Appearance > Widgets and drag a Custom Menu widget into your Primary Sidebar area or other widget area. Under Select Menu, choose the menu you just created. Save.
Add a home link to your navigation bar
- To create a "Home" link in your navigation bar that leads to the homepage of your site, go to Appearance > Menus.
- In the left column, select Custom Links.
- In the URL field, put your complete URL (i.e. https://yourwebsite.com)
- In the Link Text field, type "Home." Click Add to Menu.
- Save Menu.
Add a menu item without linking to a page
When creating a drop-down menu, you may want to add a title for a submenu without having to link it to a specific page. For example, you could create a Categories drop-down menu where the parent link doesn't lead anywhere, and your categories are listed below.
- To create a link that doesn't lead to a page, go to Appearance > Menus.
- In the left column, select Custom Links.
- In the URL field, put a pound sign (#) by itself, no http://.
- In the Link Text field, type the text you want to appear in your menu. Click Add to Menu.
Then you can go ahead and add your sub-items underneath the new custom link.