In WordPress you have a lot of possibilities to tweak menus in order to create the perfect navigation system for your site. You can position menus in predefined spots or place them wherever you want as widgets. You can, furthermore, create simple menus, multilevel menus, and mega menus – all without using plugins. Last but not least, you can customize menu items and add ALT tags.
Creating a Menu in WordPress
To create a menu – any type of menu – in WordPress you have to click on Appearance->Menus in the Admin Panel.
You are then sent to the Menu management screen. Here you can create new menus or manage existing ones. The first step when creating a menu is to click on the create a new menu link in the top left corner of the page.
Give your new menu a name, which will make it easy for you to find later. For example Menu Home Page or Menu Top Bar. This name doesn’t appear anywhere, it’s only for management purposes.
Now that you have created the menu, you can start choosing it’s elements. You can freely choose between the site’s pages by dragging and dropping them as shown on the picture (click to zoom). You can, furthermore, choose to add different elements, such as categories, team, custom links, etc. The exact list of options to add to a menu depends on your theme.
To add an element different than a page, simply click on it in the list to the left, choose from the available options appearing under it, and click on Add to menu. In the case of adding custom links, you type the link and the preferred label for it and then click on Add to menu. When done, you can add another link by repeating the procedure.
When you’re ready adding items, you have your simple menu, where all elements are on the same level. This means that they’ll appear side by side in the menu on your pages and none of the items will be hidden as a sub-item.
If you want to create a menu with items and subitems, you can start by following the steps described above. When you’re ready adding items – or while doing it – you can choose which ones should be top-level items and which ones – subitems.
You can do that by holding the cursor on top of the item which you’d like to move and when the cross-like icon appears, you can drag and drop the item to the right for a level down in the hierarchy and to the left for a level up.
You can create multiple levels that will appear in management mode like this:
On the frontend of the site the menu subitems will be accessible by hovering over the top-level item and it’s subitems. In this mode only one sublevel will be viewable at a time. That is, if you, for example, hover over a second level item, you’ll only be able to see third-level options, even though there might be more levels. To reach them you’ll have to go through all levels.
You can create multiple sublevels for each of the top-level items.
Mega Menu and Menu Item Customization
A Mega Menu is a menu that shows all levels under a top-level item. So, if we take as an example the picture above, we have a top item with 3 levels of subitems. As they are all each others subitems, they’ll appear in one column. If you had multiple level 2 items with subitems, they would’ve appeared in multiple columns.
A Mega Menu is unlocked by clicking on a top-level item in the menu and checking the Mega Menu option. In connection to Mega Menu, you can choose the maximal number of columns to appear and allow full width.
Mega Menus as well as menu item settings aren’t supported by all WordPress themes so you might not have all the options shown below by default.
Additionally, you can customize every menu item by choosing a navigation label and title attribution. Navigation label is the text which appears in the menu instead of the original title of the page. In the picture above you can see that the original page title is WP Blogging Nerd but the Navigation label is Home. Therefore in the menu appears a link to Home instead of to WP Blogging Nerd. This option is especially useful if your page titles are too long or not suitable as menu items.
The title attribution is the ALT text of the menu item. If you write something in that field, it’ll appear as a text box when site visitors hover over the item.
You can also, if your theme allows for it, add an icon before the navigation label. Often it’s Font Awesome Icons that are used. They’re added by copy-pasting their code from the Font Awesome website into the appropriate field.
Position Your Menus on Your Pages
Most WordPress themes have predefined menu spots where you can choose to place one of your menus. In most cases you have the option to add a menu in the top bar, in the header and in the bottom bar. Some premium themes allow you to choose where to place the menus, including the option Micro Site with separate settings for separate pages.
No matter what’s the case, you can manage menu positions from the Menus page in the Admin Panel.
There you can see where on your pages you can place the menu you’re working on. In this case, besides the standard options, Primary menu in the header, Top menu in the top bar, and Bottom menu in the bottom bar, I have options Split menu left and right, and Mobile menu. Choose a position for your menu and decide whether new pages should automatically be added by checking the first option under Menu Settings.
If you want to create a custom positioning for your menus and this is allowed by your theme, you have to go to Theme Options and enable the desired menu spot prior using the menu management page to choose where to place a menu.
Menus in Widgets
If the available options for menu positioning don’t work for you, you can always use widgets. The first step is to create a widget area (if your theme allows for it). You can usually do that by choosing Theme Options->Widget Areas and follow the instructions for creation of a new widget area. If you don’t have that option, you have to use the theme-predefined widget areas.
After you have created the widget area that you’d like to use for your custom menu, you have to click on Appearance->Widgets in the Admin Panel. Then you have to find the new widget area and the widget Custom Menu from the list of available widgets to the left.The number of widgets and their names depends on your WordPress theme. Custom Menu is, however, one of the standard widgets available to all. Drag and drop the Custom Menu widget, or a similar widget powered by your theme or a plugin, into the selected widget area. Now you’ll get customization options.
In the settings of the widget you can choose a title for it, if you want some text to appear above the menu, for example Explore the site. You can also skip this if you don’t want any title above the menu items.
From the Select Menu dropdown menu you can choose which one of your menus should be shown in the widget. All your settings are as set on the Menu management page so be careful that they also fit the chosen widget and positioning.
There you go – your menus look and work as you want them to.