How To Use WordPress Menus

How To Use Menus In WordPressIn this tutorial, you will learn how to create, edit, and use custom navigation menus in WordPress.

This tutorial covers the following sections:

WordPress provides a powerful and flexible built-in menu editor that lets you:

  • Create multiple custom menus (as many as you like).
  • Add different link types to each menu (e.g. pages, posts, product pages, categories, tags, external URLs, etc.
  • Rearrange the order of your menu items using drag and drop or clicking ordering links.
  • Organize menu items into hierarchical lists with submenus nested many levels deep.
  • Automatically add links to menus when you add new pages, posts, etc. to your site.
  • Place your custom navigation menus anywhere you like on your site (e.g. sidebar, header, footer, etc.) using blocks and widgets.

info

Notes:

To access and manage your menus, log into your WordPress administration area and go to Appearance > Menus.

WordPress: Appearance - Menus
From the main WordPress menu, select Appearance – Menus.

This brings up the Menus screen.

WordPress Menus screen.
The WordPress Menus screen.

You can also access the Menus screen from your theme management area by going to Appearance > Themes, selecting your currently active theme, and clicking on the Menus button.

WordPress theme - Menus button.
Select your theme and click on the Menus button to go to the Menus screen.

Creating A Menu

The Menus screen is where you can create multiple menus, customize these with different link types, and add custom navigation menus to different areas of your site.

If no menus have been created yet, the Menus screen will display a blank menu template with a single tab called ‘Edit Menus’ and a prompt to create your first menu.

WordPress Menus screen - Create your first menu.
No menus created yet!

To create a new menu, give your menu a name (in the Edit Menus tab > Menu structure section > Menu Name field) and click on the Create Menu button.

WordPress Menus screen: Edit Menus tab - Menu structure section - Menu Name field.
Give your new menu a name and click on the Create Menu button.

You can also create a new menu by clicking on the ‘create a new menu’ link below the Menus screen tab as shown below.

WordPress Menus screen - Edit your menu below, or create a new menu.
Click on the link to create a new menu.

Once the first menu has been created, the Menus screen displays the following tabs:

  • Edit Menus
  • Manage Locations
WordPress Menus tabs.
Edit Menus and Manage Locations tabs.

Let’s go through each of these tabs.

WordPress Menus – Edit Menus

Navigating the Edit Menus tab

The Edit Menus tab includes the following sections:

  1. ‘Select a menu to edit’ drop-down menu or create a new menu.
  2. Add menu items
  3. Menu structure
  4. Menu Settings
  5. Delete menu link
  6. Save/Update Menu button
WordPress Menus screen - Edit Menus tab.
The Edit Menus tab.

Once you have created a new menu, you can edit it by going to the Edit Menus tab, selecting the menu from the Select a menu to edit drop-down menu, and clicking the Select button.

WordPress Menus screen - Select a menu to edit dropdown.
Choose a menu from the dropdown and click the Select button to edit it.

To avoid cluttering your screen, the Menu items and elements on this screen are collapsible.

Click on the little black triangle to expand or collapse items.

Expand and collapse menu items.
Click on the little black triangles to expand and collapse menu items.

Additionally, many items in the WordPress Menu editor include internal features and options like tabs, search and navigation links, and various fields, some of which you can choose to display or hide on your screen.

WordPress menu item features.
WordPress Menu editor features.

Now that you understand how to navigate the Edit Menus tab, the next step is to add links (e.g. pages, posts, etc.) to your menu.

Adding Menu Items

Some common menu items you can add to your menu(s) include:

  • Pages
  • Posts
  • Custom Links
  • Categories
  • Tags
  • FAQs
  • etc.
WordPress Menus screen - Add menu items.
Add menu items.

Depending on the theme and plugins installed on your site, you may find additional menu items in this column.

WordPress Menus screen - Expanded Add menu items.
You can expand available menu items by installing certain plugins on your site.

In the screenshot below, you can see that there are no menu items listed in the Menu Structure section.

WordPress Menus screen - Edit Menus tab - No menu items added yet.
No menu items added yet.

To add links to pages, posts, etc. to your menu, select link types from the list of menu items on the left column of your screen by ticking their checkboxes, and click the Add to Menu button.

WordPress Menus screen - Add menu items.
Select menu items and click the Add to Menu button to add items to your custom menu.

The item(s) will be added to the Menu Structure section.

WordPress Menus screen: Adding menu items to Menu structure.
Add menu items to the Menu structure section to build your custom menu.

Repeat this process to continue adding new items to the Menu structure section.

You can add items from each of the different link types shown in the Add menu items column.

WordPress Menus screen: Adding different link types to the Menu structure section.
Add different link types to your custom menu.

After adding new item(s) to your menu, remember to click on the Save Menu button to save and update your menu settings.

WordPress Menus screen: Save Menu button.
Click the Save Menu button to update your menu settings.

If you don’t save your changes, a window will pop up asking you to confirm if you want to leave the page and lose your changes. Click Cancel to stay on the page.

WordPress Menus screen: Leave site dialog window.
Remember to save your changes before exiting the Menus screen.

Some menu elements will NOT display in the Edit Menus section unless you add specific plugins or functions to your site that support custom menu features.

Other elements, however, are initially hidden by default.

For example, you can add links to posts, and even tag pages to your menus. If you don’t see these listed on your menu screen, do the following to display these:

Scroll to the top right-hand corner of your Edit Menus screen and click on the Screen Options tab.

WordPress Menus screen: Screen Options tab.
Click the Screen Options tab to view additional Menu Screen options.

In the Screen elements section, tick the checkboxes next to any elements that you would like to display.

WordPress Menus screen: Screen Options - Screen elements
Show or hide screen elements by enabling or disabling checkboxes.

The item will now appear on the Add menu items section.

WordPress Menus screen: Add menu items - Tags
Display menu items like tags on your Menus screen by enabling the option in the Screen Options tab.

In the Add menu items section of certain link types (e.g. Pages and Posts), you can choose to view only your most recent items, view all items, or search for specific items (just type a word into the search field and WordPress will automatically search and return matching results).

WordPress Menus screen: Add menu items- inline Search tab.
Use the Search tab to quickly find menu items like Posts and Pages.

With other link types (e.g. categories and tags), you will see slightly different options (e.g. Most Used).

WordPress Menus screen: Add menu items - Categories panel.
Menu item panels like categories and tags display Most Used tabs.

Some items have no additional inline options (e.g. Custom Links).

WordPress Menus screen: Add menu items - Custom links.
Custom links panel.

To add multiple items to your menu structure select multiple checkboxes and click on the Add to Menu button.

WordPress Menus screen: Add menu items- selcting multiple menu items.
Select and add multiple items to your menu.

Or, add all the items in a list by clicking the Select All link then the Add to Menu button.

WordPress Menus screen: Add menu items - Select All checkbox.
Tick the Select All checkbox to select and add all menu items to your menu.

You can also add links to external URLs to your menu, using the Custom Links panel.

WordPress Menus screen: Add menu items - Custom Links panel.
Add links to external URLs to your menus using the Custom Links panel.

You can easily identify custom links in your menu structure, as the menu will display a Custom Link tag.

WordPress Menus screen: Menu structure - Custom Link.
Custom link menu item.

Note too that if you’re using a single editor only (e.g. the Block editor), menus simply display their link type (e.g. Post or Page).

WordPress Menus screen: Menu structure - Posts and Pages
The WordPress menu editor lets you quickly see which links on your menus are Posts or Pages.

If, however, you are using both the WordPress classic editor and the block editor to create posts and pages, WordPress will tag these in the menu item descriptors.

WordPress Menus screen: Menu structure - Block vs Classic editor links.
The menu editor also lets you view menu items created using the WordPress block or classic editors.

Editing Menu Items

After adding items to your menu, you can further modify and customize these.

Expand Or Collapse Menu Items

As mentioned earlier, you can expand or collapse a menu item by clicking on the little triangle on the right-hand corner of the title bar.

WordPress Menus screen: Menu structure - Expanding and collapsing menu items.
Click the triangle icon to view additional settings for your menu items.

Open Navigation Menu Links In A New Browser Tab

Opening navigation menu links in a new browser tab means allows visitors to stay on the page after closing the tab.

By default, WordPress hides the option to open navigation menu links in a new tab to prevent cluttering up your menu item panel.

If you want a menu item to open on a new tab when visitors click on the menu link, do the following:

First, expand the menu item.

WordPress Menus screen: Menu structure - expanded menu item.
Expanded menu item.

If you can’t see the Open link in a new tab field below the Navigation Label field, open the Screen Options tab and make sure that the Link Target checkbox is selected in the Show advanced menu properties section.

Screen Options tab - Show advanced menu properties - Link Target checkbox enabled.
Enable the Show advanced menu properties – Link Target checkbox in the Screen Options tab.

You should now see the Open link in a new tab option. Tick this checkbox to open the link in a new tab when visitors click on the menu link.

WordPress Menus screen - Menu structure section - Open link in a new tab.
Enable the checkbox to open the menu link in a new tab.

Remember to save your changes when done to update your menu settings.

Advanced Menu Properties

Advanced menu properties are mostly used by web developers and WordPress theme designers to further enhance, style, and customize menu options.

Your theme must support advanced menu properties for these options to work.

The screenshot below shows an item with all the advanced options displayed (you can enable these options in the Screen Options tab):

  1. Title Attribute
  2. CSS Classes (optional)
  3. Link Relationship (XFN)
  4. Description
WordPres Menus screen: Menu Structure - Advanced menu properties.
Advanced menu properties.

Let’s take a brief look at each of these properties.

Title Attribute: This field specifies the Alternative (‘Alt’) text for the menu item. This text displays when a visitor hovers over a menu item.

For example, if you add the following line into the Title Attribute field and then save your menu…

WordPress Menus screen: Menu structure - Menu item - Title Attribute
Let’s add a title attribute to this menu item.

Here is what your visitors will see if they hover over the menu link…

Title attribute displayed on a menu item.
The title attribute displays like a tooltip when visitors hover over menu items.

CSS Classes: This allows you to style your links using CSS (Cascading Style Sheets). After adding a CSS class to a menu link, you can then target the classes you have assigned from within your stylesheet. Note: This requires knowledge of CSS.

Link relationship (XFN): XFN (XHTML Friends Network) is a simple way to represent the relationships you share with the owners or authors of other websites using links.

This allows certain programs such as search engines and specialized services to understand and display the relationships you share with other people, such as friends, professional contacts, etc.

For more information, go here: XFN

Description: This field can be used to add a short description to a menu label.

Menu descriptions displayed on menu items.
Adding short menu descriptions can help users understand your menu items better.

You can also give your menu label a custom name that is different from the name of your original page name.

WordPress Menus screen: Menu structure - customize menu item labels.
Customize the label of your menu items.

Reordering Menus

The WordPress menu editor lets you easily reorder items on your menus.

To rearrange menu items, first, make sure you have added some items to your menu.

WordPress Menus screen: Add menu items - Add selected items to menu.
Make sure to add some items to your menus.

After adding menu items, notice that “Move” options will display in your item’s details section, allowing you to move the position of your item on the menu bar relative to other menu items (e.g. move up, move down, move to the top, nest under the item shown above, etc.).

WordPress Menus screen: Menu structure - Move menu item options.
Click on the links to reposition items on your menus.

To rearrange your menu items, you can either click on a “Move” option or click the title bar of an item, hold, then drag and drop it into another position.

WordPress Menus screen - Menu structure reordering methods.
Clicking on the Move links or use drag and drop to reorder your menu items

You can use a combination of both methods to get your menu items ordered exactly how you would like them to display.

WordPress Menus screen - Menu structure - reordering menu items.
Reorder menu items quickly using Move links and drag and drop.

How you order menu items in the menu editor is how your visitors will see them.

For example, here is a screenshot of a menu placed below the theme header, with items displayed in a certain order…

Menu links below header image.
Let’s reorder these menu links…

If we now rearrange the order of menu items to look like this…

WordPress Menus screen - Menu structure - reordering menu items.
Drag and drop items to reorder this menu.

The reordered menu links will automatically display to visitors as you have arranged them in the menu editor.

Reordered menu links.
Reordered menu links.

You can also create nested menus using drag-and-drop by shifting their position away from the left margin.

You can nest menu items multiple levels deep.

WordPress Menus screen - Menu structure - nested menu items.
Nest menu items using drag and drop.

Here is an example of the resulting nested menu configuration created in the previous screenshot.

Nested menus.
WordPress lets you create deeply nested menus.

Note: menu styles are controlled by the styling options in your theme and will display differently depending on the WordPress theme installed on your site.

Here are some examples of using different themes with the same menu:

Example #1…

WordPress Theme - Twenty Thirteen.
WordPress Theme – Twenty Thirteen.

Example #2…

WordPress Theme - Twenty Twenty-One.
WordPress Theme – Twenty Twenty-One.

Example #3…

WordPress Theme - Avril.
WordPress Theme – Avril.

Example #4…

WordPress Theme - Zubin Music.
WordPress Theme – Zubin Music.

If you need help finding themes for your site, see this tutorial: Where To Find WordPress Themes

The Menu Settings section lets you automatically add pages to menus depending on the options you choose:

  • Auto Add Pages: Automatically add new top-level pages to this menu. When you check this box, every new page you create on your site will be automatically added to the selected menu. Note: Use this option with caution because your menu will change if you use this feature.
  • Display location: Enable or disable the locations where you would like the selected menu to appear on your site. Options displayed in this section depend on your currently active theme.
WordPress Menus screen - Menu Settings section.
Configure menu settings in the Edit Menus section.

Most WordPress themes support custom menus.

  • If your current theme supports custom menus, you will be able to add your new menu to one of the Display locations.
  • If your current theme does not support custom menus, you will need to add your new menu via the Custom Menu widget.

Manage Locations

For menus to display on your site, you will need to assign your menus to a location on your theme (e.g. header, footer, sidebar, etc.).

Some WordPress themes provide only one menu location, even if you have created multiple custom menus.

WordPress Menus screen - Manage Locations tab - Single menu location theme.
This theme supports only one menu location.

This theme supports two menu locations…

WordPress Menus screen - Manage Locations tab - This theme supports two menus.
This theme supports two menus.

And this one has three menu locations…

WordPress Menus screen - Manage Locations tab - This theme supports three menus.
This theme supports three menus.

Some themes support multiple menu locations, and some themes support only one menu. It all depends on your theme.

To assign an existing menu to a location on your theme, choose one of the menus you have created from the dropdown menus in the Assigned Menu column.

WordPress Menus screen - Manage Locations - Assigned menus
Select a menu for each of your theme’s Assigned Menu locations.

If your theme supports multiple menus, repeat the above process to assign menus to all menu locations.

Click on the Save Changes button when done to save your menu configuration.

WordPress Menus screen - Manage Locations tab - Save Changes button.
Save your changes.

Your menu locations will now be updated.

WordPress Menus screen - Menu locations updated.
Your menu locations are now updated.

Make sure to visit your site to check that the custom menu you have created is displaying correctly in the assigned location of your theme.

WordPress Menu.
Check your menu to make sure everything is working as you intended.

Remove Menu Items

To remove an item from your menu, expand the item and click on the Remove link.

Removing a menu link.
Click the Remove link to remove an item from a custom menu.

You can also delete multiple items from your menu.

Removing multiple menu items.
Click the Remove link to remove items from your menu.

Delete Menus

To delete the menu itself, load the menu in the Edit Menus screen. Make sure that you have selected the right menu (especially if you have multiple menus), then scroll down to the bottom of the page and click on the Delete Menu link.

WordPress Menus screen - Delete Menu link.
Click the Delete Menu link to delete the selected menu from your site.

You will be asked to confirm the deletion. Click OK to proceed or Cancel to escape.

WordPress notification - You are about to permanently delete this menu.
Click OK to permanently delete the menu or Cancel to abort.

The selected menu will be deleted.

WordPress notification - The menu has been permanently deleted.
Your menu has been successfully deleted.

Manage With Live Preview

Use the Manage with Live Preview feature to view any changes made to your menus before permanently saving these.

WordPress Menus screen - Manage with Live Preview button.
Click the Manage with Live Preview button to view your changes without saving and making them live.

This will bring up the Theme Customizer screen and Live Preview feature.

Theme Customizer screen.
Preview your menu changes in the Theme Customizer screen.

If you need help using this feature, see this tutorial: How To Use The WordPress Theme Customizer

Using Custom Menus With Widgets

Custom menus can be added to your sidebar and other menu locations using widgets.

To learn how to add menus to your site using widgets, see this tutorial: How To Use Widgets – Part 3

Additional Information

There are many plugins you can use to enhance your WordPress menus.

You can search for WordPress menu plugins inside your WordPress dashboard (Plugins > Add New), or the WordPress Free Plugin Directory.

Add Plugins screen - Menu-enhancing plugins.
Search the WordPress directory for thousands of menu-enhancing plugins.

WordPress Menus – FAQs

Here are frequently asked questions about WordPress Menus:

What are WordPress menus?

WordPress menus are lists of links that typically appear on a website’s header or sidebar, providing navigation for visitors.

How do I create and edit menus in WordPress?

You can create and edit menus through the WordPress dashboard under “Appearance” > “Menus.” Here, you can add, remove, and rearrange menu items.

Can I add custom links to WordPress menus?

Yes, you can add custom links such as external URLs or specific pages within your WordPress site to menus.

What are WordPress custom menus?

WordPress custom menus allow users to create personalized menus with custom links, categories, or tags, giving more control over website navigation.

How do I add categories or tags to WordPress menus?

You can add categories or tags to WordPress menus using the “Categories” or “Tags” sections in the menu editor. Simply expand these sections and select the categories or tags you want to add.

Note, that unlike categories, there isn’t an option to add tags by default. However, if you click on ‘Screen Options‘ at the top of the screen and check the ‘Tags’ box, a Tags tab will be added to your menu options if your active theme allows.

Can I create drop-down menus in WordPress?

Yes, you can create drop-down menus by arranging menu items in a hierarchical structure within the menu editor. Sub-items will automatically become drop-down options.

How do I manage the appearance of WordPress menus?

You can control the appearance of WordPress menus, including font style, color, and alignment, through your theme’s customization options or by using custom CSS.

Are there plugins available to enhance WordPress menus?

Yes, there are various plugins available in the WordPress repository that offer additional features for menus, such as mega menus, sticky menus, and animated effects.

***

Congratulations! Now you know how to create and use custom navigation menus in WordPress.

WordPress Menus screen.
Add custom navigation menus to your WordPress site.

***

Updated: July 5th, 2024

Terms Of Use | Privacy Policy

Scroll to Top