BuddyX

13 min read · 2,698 words

How to Add a Navigation Menu in WordPress

How to Add a Navigation Menu in WordPress

A navigation menu is the group of links you usually see at the top of a website. It helps people move from one part of your site to another, like from the homepage to the blog or contact page.

Menus are very important for WordPress websites because they help visitors find what they need quickly. A good menu makes your website easier to use and can even help your site show up better in search engines like Google.

Here, you’ll learn how to make a navigation menu from scratch. We’ll cover each step, from creating a new menu to adding pages and making it mobile-friendly.

What is a Navigation Menu in WordPress?

A navigation menu is a list of links that lead to different parts of your website. It might include links to your homepage, blog posts, contact page, or other important pages.

The menu keeps your website organized. It gives visitors a clear path to follow, so they don’t get lost. It also shows search engines how your website is built, which can help your content get found online.

So, a menu isn’t just for looks. It’s a key part of how your website works and how people experience it.

Accessing the Menu Settings in WordPress

To start working with menus, you need to log in to your WordPress dashboard. This is the area where you manage your entire site.

Once you’re inside, look at the left-hand side and click on Appearance, then choose Menus. This is where you’ll be able to build and edit your menu.

This screen will be your main spot for setting up and updating all your website menus.

Creating a New Navigation Menu

To create a new menu, look for the “Create a new menu” link and click on it. Then, type in a name for your menu. This name won’t show on your site, it’s just for you to recognize it later.

After giving your menu a name, click the Create Menu button. Now, you have a blank menu that you can start adding links to.

It’s kind of like a folder you’re filling up with the pages you want people to visit.

Once your menu is ready, you’ll see a list of your website pages on the left side. You can check the boxes for the ones you want to include, then press Add to Menu.

You can also add links to blog posts, categories, or even type in a custom web address if you want to link to another site or a special page.

Once the items are added, you can drag them around to change the order. You can also create levels, like putting some pages under others.

Choosing Menu Locations in Your Theme

Most WordPress themes offer different places where your menu can appear. The most common ones are the top of the page (header), bottom (footer), or sometimes in the sidebar.

When you’re in the menu settings, look for the section called “Menu Settings” or “Display Location.” Check the box for where you want the menu to show up.

This tells your theme where to place the menu you just created, so people will see it on your site.

How to Add a Navigation Menu in WordPress
Adding Navigation Menu

Creating Drop-down (Sub) Menus

Drop-down menus let you group related pages together. For example, under a “Services” tab, you might want to list “Web Design,” “SEO,” and “Content Writing.”

To make a drop-down, drag a menu item slightly to the right under the main item. This makes it a sub-item that appears in a drop-down.

Try not to use too many sub-menus, though, because it can get confusing for people, especially on smaller screens.

Editing and Deleting Menu Items

If you want to change the name of a link or update where it goes, just click the arrow next to that menu item. You’ll see options to edit the text or change the link.

If you don’t want that item in the menu anymore, click Remove to delete it.

You can always add it back later, so don’t worry if you make a mistake. WordPress makes it easy to fix things.

Making Your Navigation Menu Responsive

A responsive menu works well on phones and tablets, not just computers. Most modern WordPress themes already take care of this.

To check, open your website on your phone and see if the menu turns into a simple button or icon that people can tap. If it doesn’t, you might need to tweak your theme settings or use a plugin.

Making sure your menu works on all devices helps everyone use your site without trouble.

Troubleshooting Common Menu Issues

If your menu isn’t showing up at all, check that you assigned it to a location. If it’s assigned and still not working, it could be a theme problem.

Sometimes, the menu might look strange or broken. This usually means the theme or plugin styles aren’t working well together.

If you’ve tried all the basic steps and it’s still not right, switching to a different theme or checking with the theme developer might help.

Bonus: Using Plugins to Enhance Menu Functionality

If you want to do more with your menu, there are plugins that can help. For example, Mega Menu plugins let you show large, detailed drop-downs with images or columns.

Sticky menu plugins make the menu stay at the top of the screen as people scroll down.

You can also find plugins that help make menus easier for people using screen readers, which makes your site more friendly for everyone.

A navigation menu that looks fine visually can still be frustrating or unusable for someone navigating with a keyboard or a screen reader. Tab through your own menu using only the keyboard, no mouse, and check that every link gets a visible focus outline as you move through it. If items disappear behind hover-only dropdowns, keyboard users may never be able to reach them at all, since there’s no hover state without a mouse.

Screen readers rely on properly nested HTML lists and ARIA attributes to announce that a menu item has a submenu before a user opens it. Most modern WordPress themes handle this correctly out of the box, but a heavily customized menu built with a page builder or a lot of custom CSS can break that structure without anyone noticing, since it still looks correct visually. Testing with a free screen reader like NVDA on Windows or VoiceOver on Mac takes a few minutes and catches problems no amount of visual QA will find.

A dropdown menu with a lot of JavaScript animation can feel sluggish on a phone with a weaker processor or a slower connection, and because the menu sits at the very top of every page, that sluggishness is one of the first things a visitor experiences on your entire site. Mega menu plugins in particular can add a meaningful amount of extra JavaScript and CSS if you’re not careful about which one you pick.

Before adding a heavier menu plugin, check its impact using a free tool like Google PageSpeed Insights or GTmetrix, both before and after installing it. If the plugin adds a noticeable hit to load time, look at whether a lighter CSS-only dropdown solution, which many themes support natively without any plugin at all, can achieve the same visual result without the extra weight.

Building a Menu With the WordPress Block Editor and Full Site Editing

Newer block-based themes, including those built on Full Site Editing, handle navigation a bit differently than the classic Appearance > Menus screen described above. In these themes, you will usually find a Navigation block inside the Site Editor, under Appearance > Editor > Navigation, rather than a separate menu management page. The Navigation block lets you add pages, custom links, and even submenus directly inside a visual block editor, and changes preview live as you make them instead of requiring a separate save-and-check-frontend step.

One difference worth knowing about upfront is that a block theme can have multiple independent navigation menus assigned to different template parts, one in the header and a different one in the footer, for example, and each is edited as its own Navigation block instance. This is more flexible than the classic system’s single set of defined locations, but it also means it is easier to end up with menus that quietly drift out of sync, a link added to the header menu that never gets added to the footer menu, if you are not deliberately checking both. If your site uses a classic theme rather than a block theme, the traditional Appearance > Menus workflow covered earlier in this guide is still the correct path, and most WordPress sites in active use today still run on classic or hybrid themes.

Organizing a Menu That Stays Usable as Your Site Grows

A menu that works well with eight pages often stops working well once a site grows to fifty or a hundred. The most common failure mode is cramming every page into the top-level menu instead of grouping related pages under a small number of parent items with dropdowns. Anything beyond seven or eight top-level items starts to overwhelm most visitors, and mobile screens make that limit even tighter since a long horizontal menu simply will not fit.

A practical approach is to group pages by what a visitor is trying to accomplish, not by how your internal team organizes content. A visitor looking for pricing does not care whether that page technically lives under “Products” or “Company” in your CMS structure, they care about finding a page labeled clearly enough that they do not have to guess. Naming menu items with the exact words visitors would search for, rather than internal jargon or clever marketing phrasing, consistently outperforms cleverness in usability testing.

As the site grows past a hundred pages, consider whether every page truly belongs in the primary navigation at all. Many WordPress sites benefit from a smaller, curated top-level menu of five to seven core destinations, with a comprehensive sitemap page or a search feature handling the long tail of less-frequently-needed pages. This keeps the primary navigation fast to scan while still making everything findable for the visitor who specifically wants it.

Search engines use your site’s navigation structure as one signal for understanding which pages matter most and how they relate to each other. A page linked directly from the primary navigation menu is treated as more important than a page buried five clicks deep with no menu link at all, and that perceived importance can influence how often search engines crawl and re-index it. This does not mean every page needs a menu link, but your most important conversion pages, service pages, or cornerstone content generally should be reachable within one or two clicks from the homepage, and the primary menu is the most direct way to accomplish that.

Menu link text also functions as anchor text in the eyes of a search engine, so using descriptive labels, “Web Design Services” rather than a vague “Services,” gives search engines a small additional signal about what that page covers. This is a minor factor compared to the actual content of the linked page, but it costs nothing to get right and compounds with every other small SEO decision made correctly across the site. Avoid keyword-stuffing menu labels beyond what a real visitor would naturally read, since an obviously unnatural label (“Buy Cheap Web Design Services Now”) reads as spammy to visitors even if it were to help rankings, which it generally does not at that point.

Multilingual and RTL Menu Considerations

If your site serves visitors in more than one language, menu setup needs a bit more planning than a single-language site. Translation plugins like WPML or Polylang typically require you to build a separate menu for each language rather than translating labels on a single shared menu, and each of those language-specific menus needs to be assigned to the correct location for that language version of the site. Skipping this step is a common cause of a site showing an English menu on a translated page, which undermines the translation work elsewhere on the page.

For languages that read right to left, Arabic or Hebrew for example, the menu also needs to visually flip direction, with the first item appearing on the right rather than the left. Most well-built WordPress themes handle this automatically once the site’s language and text direction are set correctly, but it is worth manually checking an RTL language version of your menu in the browser rather than assuming the theme handles it, since RTL support quality varies significantly between themes and some only implement it partially.

Using Icons and Visual Cues in Navigation

Adding a small icon next to a menu label, a cart icon next to “Shop” or a person icon next to “Account,” can help visitors scan the menu faster, particularly on a site with a lot of top-level items. Icons work best as a supplement to text labels rather than a replacement for them. An icon-only menu item without a visible label or an accessible text alternative is a common accessibility failure, since not every visitor recognizes the same icon the same way, and screen reader users get nothing useful from a bare icon with no accompanying text.

Most WordPress themes that support menu icons do so either through built-in customizer options or a lightweight plugin that adds an icon-picker field to each menu item’s edit screen. Keep the icon style consistent across the entire menu, mixing outline icons with filled icons in the same menu looks unpolished and can make a professional site feel assembled from mismatched parts.

A Quick Checklist Before You Consider the Menu Finished

Before calling a new navigation menu done, run through a short list rather than trusting a first glance. Confirm every link actually goes where its label says it should, since a copy-paste error in a custom link URL is easy to miss visually but frustrating for a visitor who clicks expecting one page and lands on another. Confirm the menu is assigned to every location your theme supports that you actually want it in, header and footer both, if that is the intended setup, since it is common to configure the header and forget the footer entirely.

Test on an actual mobile phone, not just a resized desktop browser window, since touch targets and hover behavior genuinely differ between the two and a resized window cannot fully substitute for a touchscreen test. Run through the menu using only a keyboard, confirming every item is reachable and clearly focused. Finally, check that any dropdown submenus close properly when a visitor clicks elsewhere on the page, since a stuck-open dropdown that blocks page content is a surprisingly common bug that only shows up once a real visitor triggers it in an order the developer did not originally test. A five-minute pass through this simple checklist after every menu change catches most of the problems that would otherwise surface later as a confused support email or a quietly rising bounce rate nobody bothered to investigate.

Putting It All Together

At this point you know how to build a menu from scratch, add links, assign it to a location in your theme, and troubleshoot the most common problems that come up. That covers the core mechanics most site owners need.

Menus are simple on the surface but they carry a lot of weight for how usable your site feels. Test your menu on an actual phone, not just a resized browser window, and run it through a keyboard-only pass at least once.

If you want more control later, custom code, a mega menu plugin, or a dedicated accessibility plugin can extend what’s possible. But the built-in WordPress menu system covers the vast majority of what a typical site actually needs.


Interesting Reads:

ChatGPT WordPress Integration

Useful Code snippets for WordPress

How to Duplicate a Page in WordPress?

Reading
13 min · 2,698 words
Published
Apr 29, 2025
Shashank Dubey
BuddyX contributor

Writing about WordPress communities, BuddyPress, BuddyBoss, LMS plugins, and the business of paid communities.

Keep reading

More from the BuddyX blog

Browse all posts on community, WordPress, BuddyPress and the studio of plugins behind BuddyX.