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. In addition, we will also cover the “Navigation” block in Gutenberg editor introduced in WordPress 5.9 as part of full site editing.
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
Default WordPress themes like twenty twenty-two does not offer any 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.
- If you are using old classic widgets area, 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.
Using Navigation Menu in Gutenberg Widgets Block Editor
The above screenshots show using drag and drop classic widget editor. However, you will have Gutenberg widgets block editor from WordPress version 5.8. Since, “Navigation Menu” is a block in Gutenberg, you can insert it in sidebar or footer area like any other blocks.
The block will look like below and you can enter a widget title and select a menu from the list of previously created menu items. It is also possible to show the submenus items in collapsed or expanded mode.
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 for the 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 the sidebar navigation menu widget in a box with each item separated using border lines.
WordPress Navigation Block
In addition to “Navigation Menu”, WordPress also introduced a “Navigation” block in version 5.9. This can easily confuse users as navigation menu is only available in the widget area while navigation block is only available in content editor. The navigation block helps to add any previously created menu item in your content area as a widget. You can customize the alignment, orientation and text size to fit in the list of links part of your menu in the content area.
Below is a navigation block grouped and shown with a background color and the appearance may look different if your theme has custom styles for this block.