How to Add Menus in WordPress

Just like a 3-course dinner menu, your website’s navigation menu must be clear and well organized to serve each course of your content.

You might not have given your WordPress website’s menu much thought until now, but it’s an important detail to get right. This tutorial will show you how easy it is to design a user-friendly menu in WordPress and bring it to life.

Start with a Sitemap

When first building your WordPress website, you might have a sitemap based on your website architecture. Typically this would be a flow chart or outline of how someone could get to each page, beginning with your homepage and branching out into categories and subpages.

If you haven’t yet thought about your website’s content or its architecture, simply follow this guide.

Once you have your sitemap in place, you will have a clear visual perspective of your website’s layout. Use this visual to choose which pages or elements to highlight in your menu.

Ideally, your menu will list your key products and services so that customers can easily find what they need in the fewest of clicks. Stick with simple words so anyone can understand what those pages are used for and what they contain, at first glance.

With WordPress, it’s easy to add menus, submenus, menus with icons, links, and more. Most themes come with pre-built menus, but you should still understand the best way to incorporate them.

Before we get into menu-making, let’s look at the most common menu templates available in WordPress themes:

Classic — known for their simplicity, classic menus often appear in the website’s header, remaining anchored to the top of a page. You’ll have categories for the top level and dropdown menu options.

Sticky/Fixed — these menus are visible no matter where you are on the page, seeming to stick to the screen and floating above the pages as users scroll through the content. Ideal for long pages, floating menus save people scrolling all the way back to the top of a page.

Drop-down — these are secondary menus that appear when you hover on the main menu items. They add another level of organization to content. If you were designing an online store, you’d use the two-tier style, for example. Here you could create one menu for clothing and accessories (by gender, age, and occasion, etc.), and another for an about page, FAQ, and so on.

The section “Add menu items” holds your website pages, posts, custom links, and categories. You can add any of these items to your menu in just a few clicks.

But before you can begin adding items, however, give your menu a clear and concise name (e.g. “main nav”) and click “Create menu.”

Now your items are unlocked, and you can start adding them to your menu. You might find the ‘View All’ option helpful. Once you’re satisfied, select “Add to Menu.”

In the Menu Structure area, notice how your menu is built on the right. You can drag and drop menu items into your desired order or click the arrow on the right to remove them.

It’s also possible to see your changes in real-time, as you make them; just select the “Manage with Live Preview” option at the top of the screen.

Once you’re satisfied with your menu options, hit “Save Menu.” A message will appear at the top of your screen, informing you that your menu has been created.

You may find that you’d prefer a different name to keep things more clear and concise. To rename menu items, simply select the small arrow on the right of the item. You can also click the current name “Navigation Label” and change it.

Finally, click Save Menu to save the changes you’ve made. Notice the remove button at the bottom of this view if you change your mind on a menu item.

Creating drop-down menus

Also known as “nested” menus, drop-down menus are navigation menus with parent and child items. When you hover over the parent item, the child items appear in a sub-menu.

To create submenus, drag one menu item into the right of another menu item, creating a stair-stepped list of items, as shown in the example below. You can add as many submenu items as you need.

Most WordPress themes have several different locations where you can add a menu. In this example, we’re using the WordPress theme, Astra, which supports two menus; Primary and Footer.

After adding pages to the menu, select the location you want to display the menu and click the “Save Menu” button.

Tip: If you’re unsure where each location is, try saving the menu in different places, then visiting your website to see how it looks. You probably won’t want to use all the locations, but you might want to use more than one.

You’re not stuck with adding menus to the display locations allowed for your theme. Widgets provide you with yet another way to display menus on your website and will be especially helpful if you’re short of suitable locations within your chosen theme.

To check the widget areas in your Theme, simply go to Appearance » Widgets. Look for one called Navigation Menu, as shown below:

Your list of widget-friendly areas depends on your theme. Choose the area where you want to place your menu.

With custom links, you can link out to your social profiles, another website, or an online store, straight from your menu.

To add a custom link, head back to the Menu area in your Admin and hit the Custom Links tab. To add a LinkedIn profile, you could type “Linkedin” in the Link text and paste the LinkedIn account URL in the URL field. Hit Add to Menu to add your LinkedIn account to the social menu. Then Save Menu to finalize the changes.

When it comes to creating a great user experience, easy-to-follow navigation menus should be one of your highest priorities. And now that you know how to add menus to your WordPress website, a fantastic user experience awaits your visitors.

Do you have any tips for creating menus in WordPress? Share in the comments below!

How to Add Menus in WordPress .

How to Add Menus in WordPress