How to Add a Navigation Bar in WordPress: A Practical Guide

Adding a navigation bar in WordPress takes about five minutes once you know which of the two systems your theme uses.

Block themes handle navigation with a block inside the Site Editor. Classic themes use the Menus screen and registered menu locations. Following instructions for the wrong one is why most people get stuck.

Which Method Applies to Your Site?

Open Appearance in your admin sidebar.

Editor means a block theme. Skip to method one.

Menus means a classic theme. Skip to method two.

Some themes show both because they support the block editor partially. When that happens, whichever screen actually contains your current header links is the one to use.

Method 1: Block Themes and the Navigation Block

1. Go to Appearance > Editor.
2. Open Patterns > Template Parts > Header.
3. Click the existing Navigation block. If there is not one, add a block and search for Navigation.
4. Use the plus icon inside the block to add links. You can search existing pages and posts by name, or paste a custom URL.
5. Drag items to reorder. Drop one item onto another to nest it as a submenu.
6. Click Save.

The Navigation block stores your menu as a reusable item, so the same menu can appear in the header and the footer and stay in sync.

Mobile behavior is built in. Select the Navigation block, open the settings sidebar, and set the overlay menu to show on mobile only, always, or never.

Method 2: Classic Themes and the Menus Screen

1. Go to Appearance > Menus.
2. Click create a new menu, name it something like Main Nav, and click Create Menu.
3. Select pages, posts, categories, or custom links from the left panel and click Add to Menu.
4. Drag items into order. Indent an item slightly to the right to make it a dropdown child.
5. Under Menu Settings, check the display location. Most themes call it Primary or Header.
6. Click Save Menu.

If no display locations appear, your theme has not registered any. That happens with some page-builder themes where navigation is handled inside the builder instead.

You can also add a navigation bar in WordPress through Appearance > Widgets if your theme has a header widget area, though this is the least common setup.

How Many Links Should a Navigation Bar Have?

Five to seven top-level links is the range I aim for on a small business site. Every link past that dilutes the ones that matter, and mobile navigation gets unusable fast.

The pattern that works: three or four pages that explain what you do, one page that proves it, and one clear contact action. Services, Portfolio, Case Studies, About, Contact. That is the whole menu on most sites I build.

Resist the urge to put everything in the nav. Your privacy policy, your login link, and your six individual service pages belong in the footer or in a dropdown, not competing with your primary path.

Make the Last Item a Button

The single highest-leverage change to most navigation bars is turning the final item into a visually distinct button.

In a block theme, add a Buttons block beside the Navigation block inside the header template part. In a classic theme, most themes let you add a CSS class to a menu item under Screen Options > CSS Classes, then style that class.

People scan navigation left to right and stop at the thing that looks clickable. Giving your contact link a background color measurably outperforms leaving it as the fifth piece of plain text.

Check It on a Phone Before You Ship

Desktop navigation almost always looks fine. Mobile is where menus break.

Open the site on your actual phone, not just a narrowed browser window. Check that the hamburger icon is tappable, that dropdowns open on tap rather than hover, and that the menu closes after someone picks a link. Hover-only dropdowns are a common theme bug and they strand mobile visitors completely.

Google's mobile usability guidance is worth a read if you want the search-side reasoning.

The Takeaway

Adding a navigation bar in WordPress is a Site Editor job on block themes and a Menus screen job on classic themes. Keep it to five to seven links, make the last one a button, and test it on a real phone.

Navigation is one piece of a page that has to earn its traffic. Marketing-Optimized Web Design covers how the rest of the layout should support it, and my conversion rate optimization work is where this kind of detail gets pushed further.