How to create a layered menu in WordPress

Creating a layered menu in WordPress takes no more time than creating a regular “flat” menu. Everything is done in the same interface in the "Appearance" - "Menu" section. For example, let's create the menu structure of a typical business card site of some abstract IT services company.


How to create a multi-level menu in WordPress

Here is an approximate menu structure that a business card site of a service company may have:

Home
Customer reviews
Services
Selection of equipment
Installation and laying of LANs
Virtualization
IP telephony
Video surveillance
Monitoring
Contacts
Blog
The menu nesting level can be any, but in my opinion, sites with more than two nesting levels are very inconvenient to use. While you are leading to a sub-item, the previous item is closed or constantly jumps before your eyes. This is mostly the problem of the programmer or the author of the topic, but the fact remains: the most common menu option on sites is a two-level one.

Some agree that before creating pages, you should create a menu of dummy links that do not lead anywhere and simply do not work on the site. This is necessary in order to determine in advance the necessary points and then create a page structure according to an already prepared version.

In principle, this is not bad and we can follow the same path: first, we will create a structure, see if everything is fine with us, and then we will create pages (you can create pages yourself, I believe in you!).

Go to the section "Appearance" - "Menu":

Go to the section "Appearance" - "Menu"

Create a new set of menus or use an existing one.

Create an empty set of menus

On the left side of this interface, find the "Arbitrary links" block and open it (I told you more about inserting links in the instructions How to add a link to the menu):

Use the "Arbitrary links" block

To create the menu structure, we need stub links so that there is no transition to some non-existent pages or external sites. To do this, in the "URL" field, it is enough to indicate the hash symbol - #, and in the "Link text" field, insert the phrase we need.

See also: How to add a menu in WordPress
Example of filling out a menu item

After clicking on the "Add to menu" button, the item we have created will appear on the right side of the screen:

Created menu item

Great! Now, by analogy, we create the rest of the menu items of the first level. As a result, we will get something like this:

Created first level menus

Let's save our intermediate result and go to the site to see how the first version of the just created menu will look like:

Appearance of the menu on the site

While it looks good, I think you can continue further. By the way, if you do not see the menu you just created, then you should pay attention to the "Topic Areas" section in the menu management interface and select the option you need there. It looks like this for me:

Setting the Theme Area

Return to the menu management interface and now, by analogy, add all the second-level menus, which we will have in the form of a drop-down menu for the "Services" item. Everything is exactly the same, I will not show anything new here.

The result should look like this:

Create the second menu level

You will most likely be surprised why the menu items are not listed under the "Services" item. Perhaps the WordPress development team would have done the creation of child items by adding additional options, such as with categories, but they made it more convenient, take a look:

Creating a submenu

You just need to grab the item you need with the mouse button and just drag it under the main menu item. What I did in the end: I dragged "Equipment Selection" under "Services", visually the submenu item was indented on the left side.

By analogy, we will make other items:

Create the rest of the submenu

The menu creation is completed by pressing the save button. After that, we can safely go to the main page of the site and check the intermediate result:

Ready two-level menu

What's next?

Then everything is simple:

Creates the desired page with subpages for Services
Removes turns each menu item-plug
insert a link to your new page in the section "Pages" menu control interface

If any of the items you were incomprehensible - write about it in the comments, I I will prepare a more detailed instruction on this subject, but, as it seems to me, this material will be enough to create an expanded menu in WordPress. Good luck!