How do you get visitors to your WordPress site? Great SEO practices and compelling content.

How do you lose them? When they can’t find what they’re looking for.

This is the role of the WordPress navigation menu function — also called wp_nav_menu. Designed and deployed properly, this navigation menu can streamline your site, keep visitors on your pages longer, and make it easy for users to quickly discover the content they came to see.

In this piece, we’ll break down the basics of the WordPress navigation menu, how you can deploy it on your site, and what other options you have for creating compelling menus.

Grow Your Business With HubSpot's Tools for WordPress Websites

What is wp_nav_menu in WordPress?

The WordPress navigation menu function allows site owners and developers to create custom menu links on WordPress pages. It can be added to the code of your functions.php file and customized to deliver specific visual and operational elements.

Prior to WordPress version 3.0, the wp_nav_menu was the best option to create menus in WordPress themes, but the addition of purpose-built menu tools on the WordPress admin page have made it much easier — and faster — to create navigation options.

There may still be some circumstances, however, where coding the navigation menu is preferable to other options, especially if you’re looking to add specific functionality or display elements.

For example, customized sidebars, footers, or sticky menus aren’t always offered with WordPress theme packages, making them a good choice for wp_nav_menu functions.

Why does wp_nav_menu matter?

Effective navigation is critical for site success — if users can’t quickly find menus that point them in the right direction, they’re more likely to leave your site than to spend time tracking down specific links.

The wp_nav_menu function makes it possible to modify menus to best suit site needs and user preferences. While most WordPress themes include navigation menus with other elements such as page templates, fonts, and add-ons, these menus typically aren’t the priority, meaning they may not align with your brand image or site design.

In this case, creating your own WordPress navigation menu may be the best way to get both the form and function you need.

How do you implement wp_nav_menu on your site?

To create and implement a WordPress navigation menu you need to access the functions.php file of your WordPress site.

Not sure where to find wp_nav_menu code? You’ve got two options: Access the file directly or via your WordPress Admin page. If you choose to access the file directly, you’ll either need permission from your WordPress site host to access code — often using tools such as cPanel — or use a file transfer protocol (FTP) service to connect with your WordPress server and access the files.

Wp_Nav_Menu Example

If you opt for the WordPress admin page route, look for the “Appearance” menu on the left-hand sidebar, then select “Theme Editor.” This will bring up a list of files that you can modify, including the functions.php file. Here’s what it looks like:

WP_Nav_menu code

Once you have access to your file, you can start making changes. First up? Add the wp_nav_menu code, which looks like this:

Wp_Nav_menu code

Each line is a potential modifier. For example, the ‘before’ and ‘after’ strings can be modified to add text before and after your menu links. The ‘fallback_cb’ string specifies a fallback page if the menu selected by users doesn’t exist. By default, this callback is set to wp_page_menu and you can also set it to ‘false’ if you don’t want a fallback. You can also select how many levels of hierarchy will be included in your menu choices — by default, this is set to ‘0,’ which means all.

Alternatives to Wp_Nav_Menu

If you’d rather not modify WordPress code, there are two other ways to add navigation menus: Through your WordPress admin page or by using a plugin. Let’s explore each option in more detail.

1. Installing a Menu Through the WordPress Admin Page

On the WordPress admin page, start by selecting Appearance from the left-hand sidebar.

Wordpress navigation menu image

Then, select Menus.

Change wordpress navigation screen

Now, you’ll see this screen:

Change wordpress nav menu screen

From here, you can specify where the menu will live, what it will be called, and what elements it will contain. You can also delete menus as needed or manage your menus with what WordPress calls “Live Preview” to see the impact these new menus will have on your site.

2. Installing With a Navigation Menu Plugin

Navigation menu plugins streamline this process even further and also provide additional functions to help customize your WordPress site.

UberMenu

Price: $25

Ubermenu plugin

UberMenu makes it easy to create customized menu layouts. From simple columns and rows to images, icons, maps, and forms, you’ve got complete control over your menu design and development.

Additionally, UberMenu includes a full grid system with individual controls for layouts, making it possible to streamline the process of menu making without limiting your ability to customize.

Why we like it: UberMenu comes with a host of features for just $25, making it a solid menu option.

Hero Mega Menu

Price: $20

Hero Mega Menu Plugin

Hero Mega Menu is a responsive menu design plugin that lets you create complex, feature-rich menus on-demand. With an intuitive user interface, drag-and-drop building, and the ability to control key menu elements such as transparency, borders, and corner radius, Hero Mega Menu might just be the WordPress plugin superhero you need to save site menus.

Why we like it: Native WooCommerce support and responsive tech support make this plugin a winner for $20.

Groovy Mega Menu

Price: $27

Groovy Mega Menu Plugin

Groovy Mega Menu is a highly-customizable menu creation plugin that comes with a host of header, horizontal, and vertical menu layouts. Along with the ability to fully customize your menu design, this plugin offers an online presets library that features some of its most popular menu builds to help streamline the process even more.

Why we like it: Responsive design means menus will look great on any device, and the sheer volume of options makes it possible to build anything you want.

Slick Menu

Price: $29

Slick Menu Plugin

Slick Menu describes itself as “the slickest WordPress vertical menu plugin ever created.” With unlimited levels, multiple level widths, a large icons library, optional background images and videos, and over 45 animations, it’s easy to create vertical menus that stand out from the crowd.

Why we like it: Slick Menu is incredibly simple to use. Just enable it, customize it and enjoy what you’ve created.

Touchy

Price: $26

Touchy WordPress Plugin

Touchy is specifically designed for the small screens of mobile devices. It’s lightweight, regularly updated, extremely customizable, and can be added to any theme. With the ability to upload and customize logo images, background images, and all aspects of menu bars, you can easily create the ideal mobile menu for your site.

Why we like it: Complete control over mobile menu bars means you can confidently capture mobile user interest.

Making WordPress Menus Matter

Simple and streamlined menus make it easier for visitors to find what they’re looking for on your site and make it more likely that they’ll stay longer, explore more, and become paying customers.

If the menus offered by your current themes and templates aren’t doing the job — or don’t match your style — you’ve got options. Know your way around WordPress code? Consider modifying the wp_nav_menu to get exactly what you want. Prefer a simpler process? Opt for admin page menu modification or use a plugin for maximum flexibility.

Bottom line? Menus matter. Make yours count.Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Dec 6, 2021 7:00:00 AM, updated December 06 2021

Topics:

WordPress Website