Navigational menus give users a brief outline of your website and give them a sense of where they can find what they are looking for. It also gives the website a bit of an organisational structure to lay out content in a cohesive manner. For websites with a large number of posts and pages, menus need to be planned meticulously as the large volume of content can quickly run into a state of disarray. If the users can easily navigate through your website, there is an increased chance of engagement and conversion. The opposite of this situation is definitely not good for business. A poorly designed menu can leave users frustrated and with no intention of visiting again. 

In WordPress, menus are an in-built theme feature. Theme features define a group of functionalities that can be added to a WordPress theme by the theme developers. So while most themes allow users to create a menu, the option to disable it also exists. Therefore, before you set out to create your WordPress Navigation menus, do check if your theme supports them. Go to Appearances in the WordPress dashboard. If you don’t see Menus listed here, your theme probably doesn’t support the feature. You can also refer to the theme’s documentation for more information.

The subsequent sections of this article will take you through a step by step guide to help you add a custom menu to a WordPress site.

Before you start setting up the menu for your WordPress website, we would suggest you take some time to plan out your website navigation. Once you have decided the structure and the constituent navigation menu items, use the following steps to add a menu to WordPress. We have used the Twenty Twenty-One theme in this article. Depending on your theme, slightly different options may be available but these basic steps might come in handy:

1. The first thing we need to do is to create a new menu for our website. Go to Appearances in the sidebar menu of the WordPress dashboard and click on Menus.

2. In the Menus screen that appears next, you will be able to either create a new menu or edit an existing one. If you are creating a menu for the first time, skip to the next step (step 3). To create a new Menu, click on the Create a new menu option as shown in the image. If you want to edit the existing menu, skip to the next section of this article (Adding Menu Items).

3. Next, enter the menu name. Here, you will also see the option to assign a display location to the menu. The Twenty Twenty-One theme allows two menu locations: the primary navigation below the header section and a secondary menu inside the footer. We want to display the menu in the main header section only. You can also add pages automatically to the menu by ticking the checkbox next to it.

4. Once you’ve adjusted the settings for your menu, click on the Create Menu button and an empty menu will be created. 

Note: If this is the first menu you’ve created, a new tab called Manage Locations will appear next to the Edit Menus tab. This tab shows display locations made available by the theme and allows you to assign a menu to each location. So, you can create different menus and assign a different one to each location. These menu settings can be updated any time.

Now that we have created an empty menu, we are ready to build the menu structure we had planned earlier. Always try to keep the menu design simple. 

The Add menu items section on the left side allows the WordPress user to add Pages, Posts, Custom Links and Categories to the menu. Select the pages or posts you want to add to the menu and click the Add to menu button.

Similarly, you can also use the Custom Links option to enter a custom URL. Enter the URL and give it a suitable title as follows:

Our menu now contains the necessary elements but not in the order we’d like. In this step, we will order our menu items and customise the menu according to our planned structure. 

To do this, navigate to the Menu structure section on the right side of the Add menu items section, and observe the current menu elements. The items will appear in the order in which they were added.

To customise the menu, we simply need to drag and drop the menu items in the order we would like them to appear.

Continue moving the elements around until you are satisfied with the order. Once each new menu item has been arranged, click on the Save Menu button and the menu will be displayed on your website in the desired location.

Adding a sub-menu item is similar to organising the menu and involves a bit of dragging and dropping around. We added a few WordPress posts to our menu to demonstrate the process.

Drag and drop the sub-menu item such that it is nested under the required menu item. For example, in our menu, we nested two blog posts under the ‘How to: WordPress’ such that they have become sub-menu items. The ‘sub item’ label is also visible against them.

Once you’ve added all the sub-menu elements under the required parent item, click on the Save Menu button. The drop-down menu should be up and working on the front end of your website.

Now that we have our menu structured and working on the website, we can focus on styling it. We will add styles using CSS classes. This might be a little daunting for beginners but even they can manage simple customisations with a little custom code. Advanced developers will find this feature extremely useful to customise the menu. 

1. The first step is to scroll to the top right corner of the WordPress menu bar and click on Screen Options.

2. From the drop-down, check the box next to CSS classes. This will allow you to add custom classes to your menu items.

3. In the Menu Structure section, click the arrow to the right of a menu item to reveal the additional configurations. You will now see the option to add custom CSS classes to the menu item. 

4. Enter the CSS class and save the menu. You can now add styles against the CSS classes you added and customise your menu to your liking.

In the preceding sections, we discussed adding a WordPress menu using the in-built functions. You can, however, choose to use a plugin to add and customise your menu. This can be useful for absolute beginners, especially in terms of adding customisations which would require quite a bit of CSS. We would recommend the following plugins for menu customisation:

1. Max Mega Menu: Max Mega Menu is a free plugin that offers several menu display locations and an easy-to-use drag and drop editor. Using this plugin’s menu management system, you can organise sub menus into rows and columns with its Grid Layout builder. The plugin also supports animations and free icons that can be helpful for beginners. The paid version includes features like a sticky menu, custom item styling, and a menu logo. 

2. Responsive Menu: As the name suggests, this free plugin allows users to create highly customisable and responsive menus. It comes with an interactive and easy-to-use interface which makes it suitable for beginners as no coding experience is required. It offers over 150 customisable options and is a good option to consider for responsive menus.

3. UberMenu: UberMenu is a premium plugin that gives users greater control over the menu layout and boasts of an extremely responsive customer support team. This plugin is a particularly good choice if you want to create an elaborate and unique menu. It allows you to add custom HTML, shortcodes, widgets and maps, all while ensuring responsive dynamic menus. 

4. WordPress Mega Menu – QuadMenu: The QuadMenu plugin allows easy integration of the menu into the website theme. With this plugin, you can create mega menus, tabs menus and carousel menus in a simple, user-friendly way. The plugin comes with an advanced and robust visual editor that allows easy customisations. The plugin is not particularly suited for large-scale menus.

A website’s menu is a vital component that must be designed and set up with care and diligence. Easy to use navigation menus are essential for creating a better user experience. A well-made menu will save the user quite a bit of time and is likely to increase your website engagement and conversion. 

In this article, we discussed creating a menu using the inbuilt functionality of the WordPress themes. While the method to create a menu is quite straightforward, adding CSS styles and customisations may not be easy for beginners. There’s quite a bit of learning involved here but we would encourage you to stick to the process as it will prove extremely beneficial in the long run. 

We also made some suggestions about some excellent plugins that can be extremely helpful should you choose to use them. However, using plugins always comes with the risk of slowing down the website’s performance. You should also bear in mind that if the plugin crashes or becomes incompatible with other features of your website, you might lose your website menu altogether. Do weigh the pros and cons of each approach before you set out to build your website. 

We hope you found this article useful and that it helped you in your WordPress journey.