WordPress admin panel contains large number of settings to customize your website. However, most of the site owners rely on theme’s option panel or customizer settings and forget to use the default options. When talking about menu, you may think adding it in header or footer section. WordPress also offers a navigation menu widget that many people do not aware of. In this article, we will explain how to add navigation menu widget in WordPress site.
What is Navigation Menu?
“Navigation Menu” is one of the widgets comes with default WordPress installation. Unlike other widgets where you can directly add content, you have to first create a menu to show in the navigation menu widget. You can show the navigation menu widget in sidebar, header and footer and any other supported area by your theme.
Navigation Menu Vs Header/Footer Menu
Now the confusion comes that what is the difference between navigation menu and normal menu. Here is the answer – navigation menu is a widget which needs a menu item to show in the widget. You can create a custom links to show in the navigation menu widget or use the same header/footer menu. As mentioned, you can insert the widget in all the supported areas by your theme.
- You can show list of useful collection articles and show them in the sidebar.
- Show useful links in the footer widget area.
Navigation Menu Vs Text / Custom HTML Widget
Another confusion is that you can use text or Custom HTML to show list of links in sidebar and footer widget area. If this is the case, you may wonder in which way “Navigation Menu” widget is different than these widgets.
- You can use a single menu list in header as primary menu or in sidebar/footer as navigation menu widget. You can’t use text / Custom HTML widgets as menu in header or footer.
- Theme developers can customize the look of widgets and hence navigation menu on the sidebar will look beautiful compared to plain list. If you use Custom HTML widget, you have to customize the look with your own custom CSS.
- Generally, you can see the currently viewed page in the navigation menu is highlighted (this also depends on your theme). This will help you to create documentations and tutorials to have collection of related articles.
In summary, the use of navigation menu widget completely depends on your theme’s style. Otherwise, you may not find any difference between Navigation Menu and Text / Custom HTML widgets.
How to Create a Navigation Menu?
After login to your WordPress admin panel, go to “Appearance > Menus” section. Click on the “create a new menu” link.
Provide a name for your menu and click on “Create Menu” button.
Add links to your menu and click on “Save Menu” after completing the list items.
That’s all!!! Now you have created a navigation menu item which is similar to creating a normal menu item in WordPress.
Add Navigation Menu in Header
Click on “Manage Locations” tab to view all the supported menu locations by your theme. The default twenty twenty-one theme offers primary and secondary locations. You can click on the dropdown and select your navigation menu to show in that location.
Many other themes offer multiple menu locations and you can assign your navigation menu in any of the supported location.
Add Navigation Menu in Sidebar
Themes like twenty twenty-one does not offer ay sidebar. In this case, navigation menu widget is of no use. However, you can add navigation menu widget in the sidebar when your theme supports a sidebar.
- Go to “Appearance > Widgets” section.
- Drag and drop “Navigation Menu” widget to your sidebar.
- Provide a title and select the name of your navigation menu.
- Save your changes.
- View your live site to see the navigation menu widget in action.
Add Navigation Menu in Footer
Similar to sidebar, you can drag and drop “Navigation Menu” widget in your footer area.
It will look like below on the default twenty twenty-one WordPress theme.
Customizing Navigation Menu Widget
The look of navigation menu widget depends on your theme’s style. Simple themes like GeneratePress and Astra do not offer styling of widgets. In this case, you may need to add custom CSS on your own. However, many commercial themes offer custom style of sidebar widgets. It will help you to show your navigation menu items standing out from the main content. Below is an example of Highend theme that shows a sidebar navigation menu widget.