The WordPress Navigation Menu: What It Is (& How It Works)

Doug Bonderud
Doug Bonderud

Published:

Once visitors land on your website, it’s your job to keep them there for as long as possible. One of the most underrated ways to do this is by using a WordPress navigation menu.

Person using their wordpress navigation menu

The WordPress navigation menu function — or wp_nav_menu — can streamline your site, increase time-on-page, and make it easier for users to discover the content they came to see.

In this post, 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, like the one in the image below:

an example of a navigation menu on the hubspot website

Before 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 has made it much easier — and faster — to create navigation options.

There may still be some circumstances, however, when coding the navigation menu is preferable, especially if you want 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 allows you to modify menus to best suit your site’s needs and user preferences. While most WordPress themes include navigation menus with other elements such as page templates, fonts, and add-ons, these menus aren’t the priority, meaning they may not align with your brand image or site design.

Creating your WordPress navigation menu may be the best way to get 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 the 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 the code — often using tools such as cPanel — or use a file transfer protocol (FTP) client 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 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, add the wp_nav_menu code, which looks like this:

$defaults = array( 'theme_location' => '', 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'depth' => 0, 'walker' => '', ); wp_nav_menu( $defaults);

Each line is a potential modifier. For example, you can modify the ‘before’ and ‘after’ strings 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 hierarchy levels to include in your menu choices — which is set to ‘0’ by default, meaning all.

Alternatives to Wp_Nav_Menu

WordPress makes it very easy to add menus, but keep in mind that the exact location of your menu will depend on the WordPress theme you use.

Let’s now see how to create a custom navigation menu in WordPress.

Video Tutorial

If you prefer written instructions, keep reading. 

1. Install 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 you’ll call it, 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. Install a menu with a navigation menu plugin.

Navigation menu plugins streamline this process further and 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 an entire 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, an extensive icons library, optional background images, 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 more straightforward process? Opt for admin page menu modification or use a plugin for maximum flexibility.

Bottom line? Menus matter. Make yours count.

Editor's note: This post was originally published in December 2021 and has been updated for comprehensiveness.

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

Related Articles

Capture, organize, and engage web visitors with free forms, live chat, CRM, analytics, and more.

DOWNLOAD THE FREE PLUGIN

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO