Navigation menu in WordPress

A navigation menu plays a vital role when creating great user experiences on a WordPress website since it serves as a map for website visitors.

WordPress allows to create a custom menu to be used as a navigation for a website. You can create and manage menus using native a WordPress functionality.

Locate custom menu

Creating a custom menu does not require any coding skills.

In WordPress dashboard:

1. Open the Customizer (Appearance → Customize).
2. Click Menus. The Menus pane displays all available custom menus along with a button to create a new one. If your website does not have any set menus yet then you will see only the button for creating a new menu.
3. To view available menu locations on your website, click on View All Location. Each menu location can have its own custom menu.

Menu locations in themes

The menu location can vary depending on the theme you are using. Some themes come with additional menu locations such as social links menu, footer menu, etc.

Aquene

The theme includes three menu locations:

• Primary Menu – located next to your site title.
• Footer Menu – located located at the bottom of your site.
• Social Menu – displayed in two locations: in the header and footer areas.

Venture

The theme includes three menu locations:

• Primary menu — located in the header, next to your site title.
• Social menu — located at the bottom of your site in the footer.
• Footer menu — located at the bottom of your site, next to the site credits section.

Prosperity

The theme includes three menu locations:

• Primary menu — located in the header, below the site title.
• Secondary menu — located in the header, next the site title.
• Social menu — displayed in two locations: above the site title, on the right side and at the bottom of your site.

To add description text to the Secondary menu, visit the Menus page in dashboard and use the Screen Options tab to Show advanced menu properties.

Select “Description” there to start editing menu descriptions. After, add descriptions to any link in the menu.

Fortune

The theme includes three menu locations:

• Primary Menu – located next to your site title.
• Top Bar Menu – located next to your site title.
• Social Menu – displayed in two locations: in the header and footer areas.

Appetite

The theme includes two menu locations:

• Primary menu – located next to your site title.
• Social menu – displayed in two locations: in the toggle sidebar and at the bottom of your site.

Hermes

The theme includes two menu locations:

• Primary Menu – located next to your site title.
• Social Menu – located in the header section.

The Breaking News

The theme includes two menu locations:

• Primary menu – located below to your site title.
• Social menu – located in the site header.

Add custom menu

WordPress makes it easy to create menus. Also, there is no limit on how many menus to create:

1. In the Customizer, click Menus to open the pane.
2. In the Menus pane, click Create New Menu to add a new menu.
3. Add a name of your custom menu under the Menu Name label.
4. Select a location for your custom menu under the Menu Locations label.
5. Click Next at the bottom of the pane to start adding your links.
6. Click Add Items to add a menu item you want to have in your menu. It can be Pages, Links, Categories, etc.
7. When you have your menu items added and arranged in order, click Publish to save your menu.

Moreover, you can also use Custom Menus in conjunction with the Custom Menus widget.

Add menu to widget area

By default, WordPress comes with a Custom Menu widget to display posts, pages, categories, and custom links in a widget area (for instance, in the sidebar).

After creating a navigation menu in WordPress, you can use it in the Custom Menu widget.

1. In the Customizer, click the Widget menu to open the Widget Customize Screen.
2. Select a widget area where you want to add the Custom Menu widget.
3. Click Add a Widget button at the bottom of sidebar to see the list of available widgets.
4. Find and click a Custom Menu widget to add it to the widget area.

After adding the widget to the widget area in the Customizer, you’ll see the following widget settings: Title and Select Menu.

• In the Title setting, add a text you want to display above your custom menu in the widget area.
• In the Select Menu setting, choose your custom menu you want to display in the widget area.

Open menu links in a new tab

By default, all of your menu items will always open in the same browser tab (window).

WordPress comes with an option to open menu items in a new browser tab without using any plugins.

There are two ways to enable Link Targeting in WordPress: from the Menu page and from the Customizer.

Menu page

In WordPress dashboard:

1. Go to Appearance → Menus.
2. Click on the Screen Options link in the top right corner of the menu admin screen.
3. Check the “Link Target” option which will reveal the “Open link in a new tab” option.
4. If you want to change existing menu items to open in a new tab, click the arrow next to the menu item you want to edit to expand the options. The menu item should now display a checkbox to open the link in a new tab.
5. Save changes.

Customizer

In WordPress dashboard:

1. Navigate to Appearance → Customize → Menus.
2. Click on the gear shift icon, underneath the Publish button.
3. Check off Link Target.
4. To change existing menu items to open in a new tab, select the menu you wish to edit from within the Customizer, click on the item, and check Open link in a new tab.
5. Publish changes.

Change a color of menu item

WordPress does provide options to edit colors used in a classic navigation menu. However, there is a way to edit the menu design and change default colors using a custom CSS class method.