A brief intro to WordPress menus

Menus are a critical component of most websites. People will come to your site from a variety of sources — Google, ads from Facebook and other platforms, by entering the URL in their browser, and so on. Often, the first page someone comes to may not be the one they need or the one you want them to spend time on. A well-designed and carefully considered menu will allow these users to quickly and easily find what they need. It will encourage them to spend more time on your site and visit additional pages. On the other hand, a poorly designed or incomplete menu will frustrate visitors and lead them to leave.

Make sure you invest time planning out a logical and intuitive menu structure. For more on how to create an effective menu, check out this post. If you’re not sure how to organize your menu, you might want to try a card sorting exercise with some representative users. Once you’ve got the structure down, you’ll need the technical know-how to implement it. This post covers how to do that in WordPress.

Menu locations in WordPress

Depending on your installation, your WordPress website may have multiple menus or it may have only one. For example, your site may have separate menus for the  header and footer, or the site may have only one menu. Often sites with only one menu display that same menu in both the header and footer. In this case, any updates you make will apply to both the header and footer.

Adding a new menu item

Steps (see screenshot above):

• From the admin area, hover over “Appearance” and click “Menus.”
• In the “Pages” sidebar, check the box next to the page you want to add. Note that there are tabs to “View All” and “Search.” Try one of those if you don’t see the page you want to add under the “Most Recent” tab.
• Click the “Add to Menu” button. See the steps below for editing and moving the newly added item.
• Scroll down and click “Save Menu.”

Note: In most cases, menus have space limitations. If you add too many items, they will overflow their boundaries. This is something you’ll want to avoid. If you find yourself with too many items in a menu, consider (a) moving some under an existing category — we put all our skills under the “Skills” menu and (b) shortening the names of your menu items (see below for more). 

To switch which menu you’re editing

As we noted above, some sites will have both a footer and a header menu. It’s easy to switch between them. Here’s how.

Steps (see screenshot above): 

• From the admin area, hover over “Appearance” and click “Menus.”
• At the top of the page, select the menu you wish to edit from the dropdown (screenshot above).
• Click “Select.”
• Below you’ll now see the menu you selected. Follow the steps laid out on this page to edit.

To change the order of menu items, including putting an item underneath another

• Navigate to the menu you wish to edit following the steps laid out above.
• Hover over the menu item you want to move until you see an icon with four arrows.
• Drag the menu item to where you want it.
• To put an item under an existing one (i.e. create a dropdown menu), move it under the item and then drag to the right.
• Scroll down and click “Save Menu.”

Note: The number of levels your site can handle will vary. Some will allow only one level, others two levels, and so on. Check with your developer or theme documentation for details. 

To edit the name of a menu item

By default, WordPress will set your page title as the navigation label in the menu. However, you’ll often want to shorten and simplify page names for the menu. This makes it easier for users to quickly identify what they need. Plus, space limitations mean that you can only fit so many characters in a menu before it starts to overflow its bounds. As an example, the title of this post would take up the entire menu space on desktop and overflow to multiple lines on the mobile menu. Shorter titles allow you to display more top-level menu items without overflow issues.

Steps (see screenshot above):

• Navigate to the menu you wish to edit following the steps laid out above.
• Click the arrow to the right of the menu item you want to edit to expand the options.
• Click into the text box where the current name is and type in a new name.
• Scroll down and click “Save Menu.”

Create a placeholder menu item

Sometimes, you’ll want to create a menu item that doesn’t go anywhere. You can then put other menu items underneath the placeholder. This can be a useful way to organize related content and keep the top-level menu to a manageable size. As one example, this site has “Skills” in the menu. But, that menu item doesn’t link to a page — it just allows users to access the menu items underneath, which link to pages covering the various skills we offer.

Steps (see screenshot above):

• Navigate to the menu you wish to edit following the steps laid out above.
• Click the arrow to the right of the menu item you want to edit to expand the options.
• Click into the text box where the current name is and type a hash (#).
• Scroll down and click “Save Menu.”