We all need landmarks in the digital world, right? However, talking about the ecosystem of a website, you should refer to the navigation menu as a comrade. In the end, is just a map that guides you to dig deeper and fully enjoy the site experience.
It may sound naive, but it is what makes users leave a website without hesitations. A bad navigation comes along with frustrations and an illogical flow. The good news is that WordPress includes a solid menu manager tool to keep people on track and convince them to come back. Who doesn’t aim for such a behavior, right?
Step 1 – Create a Custom Menu
You can easily create navigation menus in WordPress. Log into your Dashboard, go to Appearance → Customize → Menus and click Add a menu button.
Now you’re able to set the location of your menu by checking the field you find it suitable: Footer, Primary Header, Secondary Header and Social Menu.Once you have a convenient name for it, just press the Create Menu.
Step 2 – Add Items to your Menu
Now that you have a menu and a location for it, all you need to do is to add menu items by:
- Clicking on the Add Items button and choosing the menu item type from the list that appears on the right.
- After selecting the desired item from the list, please click Add to Menu button.
You can add several types of menu items to your custom menu such as:
- Page: Adds a link to another page on your site.
- Link: Adds a custom URL linking to another site.
- Category: Shows a feed of blog posts from a given category.
- Tag: Shows a feed of blog posts from a given tag.
- Post: Links directly to a blog post on your site.
NOTE: If the elements that you’d like to add to your menu are not available on the left side of the page, just click the Screen Options button at the top right side of the page. Once you did that, a list of different modules will be displayed. You can check now all the missing elements from the menu
Step 3 – Organize your Menu
With all the menu items in place, you can change the order and the placement of the menu items by simply using the drag-and-drop gesture. Using the same system you can even create sub-menus or drop-down style menus. Just drag the individual items to the right and set them under a parent tab. In case you want to revert your changes please drag the menu items to the left to make them parent again. Feel free to play around, and find the right scheme for your particular needs.
Step 4 – Assign it to a Menu Location
Everything is pretty much set once you reached this step. The next phase is to let WordPress know where you need the navigation menu to be showcased. To do that, browse to the Menu Locations area and depending on what theme you’re using, you’ll be able to choose from the available Menu Locations. Simply assign the previously created menu to the desired Location, and you are off to the races.
- The Magical Number Seven (plus or minus two)
This is because short-term memory holds only seven items. It’s a fact, not a wishful thinking thing. With fewer menu items, your visitors’ eyes are less likely to scan past important items. Every time you remove a menu item, the remaining items become more prominent. Challenge yourself to limit your navigation to five items.
- Avoid Drop-Down Menus
By not using drop-down style menus, we reduce the possibilities of the website visitors to miss the relevant content. Keep it simple.
How do I create a un-clickable parent tab for my sub-menu?
To create a menu item that is not clickable but will still contain sub-menus items, just add a Custom Links menu item and add a # symbol in the “Link Address (URL)” field.
Showing Items Only to Logged In/Out Users
Some links only make sense if a user is logged in or not. For example, you definitely want to show the “Log In” button only if a user is not already logged in on your website. In order to do that we will use the flexible Nav Menu Roles plugin, which will add some controls for each menu item in Appearance → Menus.
Adding a Call to Action Button Style
An effective call-to-action will drive your users to take your desired action. If you want to transform one of your menu items into such a button (see the “Add Listing” from the demo), you just need to add the “cta” class to that item. To do that, navigate to Appearance → Menus, enable the CSS Classes section from the Screen Options tab, then go to your menu item and simply add the “cta” class (see the guided animation).