How to create Multilevel / Hierarchical menus in WordPress

In WordPress you are able to create a multilevel / hierarchical menu via WordPress Menu System ( WordPress admin -> Appearance -> Menu ) as well as via Theme Customizer ( WordPress admin -> Appearance -> Customize ). 

In this documentation we will be looking at the steps to create a multilevel / hierarchical menu.
We will start by looking at the WordPress Menu System.

WordPress Menu System

You can access the WordPress Menu System by logging into your WordPress dashboard, and navigate to Appearance -> Menu.

Set the screen Options

On the right hand, top corner of your screen, you can find the screen options tab. 

1. Click on it to drop-down and show all available types and properties.
2. Check on all the available check-boxes, except the Description check-box.
3. Customizr and Customizr Pro Theme, does not support menu description. Therefore, you should leave Description check-box unchecked.

Create Menu

1. Click on the create a new menu link.
2. Enter your new menu name. In this documentation, we will name it Sample Menu.
3. Click on Create Menu button.

Assign Menu Location

Next, we will need to assign menu to it's location.

1. Assign Sample Menu to Main Menu ( Theme locations ) by checking on the check-box.
2. Click on Save Menu button.

Types Of Menu Items Available

In Customizr and Customizr Pro Theme, there are 6 types of menu items available.

1. Pages - They are the pages that you have created.
2. Posts - They are the blog posts that you have created.
3. Custom Links - You can use this to create a menu item that links to any URL.
4. Categories - They are your available categories.
5. Tags - They are your available tags.
6. Format - They are your available post formats.

Creating Menu Item ( Parent Menu Item )

1. In this example we will assign a page, named Sample Page to the menu as a Parent Menu Item.
2. Check on the Sample Page check-box, and Click Add to Menu button.
   

   

3. You will see that it's automatically added to the right hand panel as a menu item.
   

   

4. Note: This is optional. Normally you do not need to use these steps.
   
   • You can edit the properties of the Sample Page menu item, by clicking on the tiny drop arrow on the right.
   • It will expand and show you some text inputs.
   • You can enter a Title Attribute, this will only be visible on the front end, when you move your mouse pointer over the menu item and stay there.
   • Open link in a new window/tab check-box. You can check on this check-box, if you want the page to open in a new tab or window.
   • You can enter CSS Classes to enable special styling of this menu item using custom CSS.
   • The Link Relationship ( XFN ) is for adding rel attribute to the menu link. You can refer to this documentation ( Defining relationships with XFN ) for more information on using XFN.

   

5. Click on Save Menu button to save all your edits.

6. Repeat steps 1 to 3 to assign pages, posts ... etc to the menu as Parent Menu item.

7. Important Notes: 
   • Keep your menu as short as possible.
     • Speaking from personal experience - Sometimes menu items get lost when you try to save a very large menu. This happen because your posted data is too much for your server to handle.
     • A short and organized menu is easily accessible on mobile. Long menu is difficult to access in mobile, because it requires scrolling and not user friendly.
   • Normally, we only assign pages to menu, because they are not accessible unless we tag it to the menu.
   • We do not assign posts to menu, because they are accessible via your Home page or Posts page.

8. By now you should have a few Parent Menu Items.
   

Create Sub Menu Items

Now we can proceed to create sub menu items. Looking at the previous screenshot, you can see that there is a page named Level 1. We will be adding a few sub menu items to it.

1. Select pages that you want to use as sub menu item and add them to the menu area. 
   • In this example we will add Level 2a, 2b, and Level 3a, 3b pages.
   • Check on their check box and click Add to Menu button.

   

2. You will see that they are added to the Menu Structure on the right.
   

   

3. WordPress menu system supports drag and drop. Therefore, you are able to click and hold a menu item, drag it to a new position before releasing the mouse button to drop it in place.
   • You can start dragging the sub Level pages into their position.
   • Drag Level 2a and place it under Level 1 and slightly to the right, this will indicate that it's a sub menu item of Level 1.
   • Drag Level 2b directly underneath Level 2a, this will indicate that it's a sub menu item of Level 1, but on the same level as Level 2a.
   • Now we can create a third level, by dragging Level 3a and place it under Level 2b and slightly to the right, this will indicate that it's a sub menu item of Level 2b.
   • Drag Level 3b directly underneath Level 3a, this will indicate that it's a sub menu item of Level 2b, but on the same level as Level 3a.
   • Look at the following screenshot to have a better understanding.

   

4. Click on Save Menu to save your setup.
5. That's all for using the WordPress Menu System to setup your menu.

Theme Customizer

Next, we will proceed to look at how to use the WordPress Theme Customizer to setup your menu structure.
Login to your WordPress dashboard and navigate to WordPress admin -> Appearance -> Customize -> Menus.

Create Menu

1. Click on the + Add a menu button.
   

   

2. Enter a menu name, in this example we will call our menu, Sample Menu 2
   

   

3. Click on Create Menu button and you will see the following screenshot.
   

4. Check on the Main Menu check box to assign Sample Menu 2 to the Main Menu, then click on + Add Items button. The section to select menu item will slide out.
   

Add Menu Items

1. Click on Page, it will drop-down to let you select your pages that you want to add to menu structure.
   

2. Click on the pages that you want to add to your menu, they will be automatically added to the menu structure on the left.
   

Arrange Menu Items

1. We can now begin arranging the menu items into multi-level.
2. Click on the word Reorder, controls will appear for you to re-arrange them.
   

   

3. Click on the arrows up, down, left, right for each menu item, to arrange them into multi-level.
   

4. We are done now. Click on Save and Publish button.

5. You can proceed to manage your header menus.

External Resources

1. WordPress Menu User Guide