How to Add a Navigation Bar to Your WordPress Header

To add a navigation bar to your WordPress header, create a menu and assign it to the header. On a block theme, open the Site Editor, edit the Header template part and add a Navigation block. On a classic theme, go to Appearance, then Menus, build the menu and tick a header menu location. If your theme has no header location, register one in code with register_nav_menus() and print it with wp_nav_menu().

Why the header is the right place

Visitors look for the main menu at the top of the page. A clear header menu gets them to your key pages in one click, helps search engines find your important URLs through plain links, and sets the structure of the site in a way that people read without thinking. Keep it short. Five to seven top-level items is enough for most sites, with the rest tucked in sub-menus or the footer.

First, find out which kind of theme you have

WordPress themes fall into two groups, and the steps differ.

• Block themes are built for the Site Editor. In your dashboard you see Appearance, Editor, and the Customizer is usually absent. Twenty Twenty-Five is a block theme.
• Classic themes use PHP template files. You see Appearance, Menus and often Appearance, Customize. Many older themes and page-builder starter themes are classic.

Open the Appearance menu in your dashboard. If it shows Editor, follow the block theme steps. If it shows Menus, follow the classic steps. Some classic themes also offer a Site Editor-style experience through a builder, so check your theme’s documentation if neither matches.

Add a navigation bar in a block theme

The Site Editor treats the header as a template part. You edit it once and the change appears on every page that uses it.

1. Go to Appearance, Editor.
2. Open Patterns, then Template parts, and choose Header. In some versions you can reach it through Design in the Editor sidebar instead. Click the preview to edit it.
3. Select the existing Navigation block, or click the plus button inside the header to insert a new one. Search for “Navigation”.
4. Add links. Use the plus button inside the block to add pages, posts, categories or custom links. You can also choose an existing menu from the block settings.
5. Drag items to reorder them. Drag one item slightly to the right under another to make a sub-menu, or use the block list view to nest items.
6. Click Save and view your site.

Reusing one menu

The Navigation block stores its menu as a saved entry. If you want the same menu in the header and the footer, pick the saved menu from the block’s settings instead of creating a second copy. That way an edit in one place updates both.

Change the look

Select the Navigation block and open the settings sidebar. You can set the text colour, background, link spacing, font size and the layout (horizontal or vertical, with justification). Under the overlay settings you decide when the menu turns into a toggle button. Styles you set here apply to the block. Site-wide styles live under Styles in the Editor.

Start from a different header

If you dislike the default layout, open the pattern inserter and look for header patterns. Many block themes ship several. Pick one, then replace the placeholder links with your menu.

Add a navigation bar in a classic theme

Classic themes use menu locations defined by the theme. A location is a named slot such as “Primary” or “Header”. You build a menu, then assign it to a slot.

1. Go to Appearance, Menus.
2. Click create a new menu, type a name and click Create Menu.
3. In the left column, tick the pages, posts, categories or custom links you want and click Add to Menu.
4. Drag items to reorder them. Drag an item to the right under another item to make it a sub-menu.
5. Under Menu Settings, tick the header location, usually called Primary, Header or Main Menu.
6. Click Save Menu and reload your site.

You can do the same from Appearance, Customize, Menus, where the preview updates as you type. The Customizer is a good choice if you want to see the header while you change it.

Custom links and labels

The Custom Links panel lets you add any URL, such as an external page or a section anchor. To rename a menu item without changing the page title, open the item in the menu editor and edit its Navigation Label. If you do not see options such as CSS classes or link target, open Screen Options at the top of the page and tick them.

Register a menu location in a classic theme

If the Menu Settings panel shows no header location, or the theme has no menu support, add one yourself. The example below is for a child theme or a small plugin, not for editing a parent theme directly, because updates would overwrite your change. This is example code, so adapt the names to your project.

Step 1: register the location in functions.php

<?php
// Example: register a header menu location.
function mytheme_register_menus() {
	register_nav_menus(
		array(
			'header-menu' => __( 'Header Menu', 'mytheme' ),
		)
	);
}
add_action( 'after_setup_theme', 'mytheme_register_menus' );

Step 2: print the menu in header.php

<?php if ( has_nav_menu( 'header-menu' ) ) : ?>
	<nav class="site-nav" aria-label="<?php esc_attr_e( 'Primary', 'mytheme' ); ?>">
		<?php
		wp_nav_menu(
			array(
				'theme_location' => 'header-menu',
				'container'      => false,
				'menu_class'     => 'site-nav__list',
				'depth'          => 2,
			)
		);
		?>
	</nav>
<?php endif; ?>

After you save both files, go to Appearance, Menus. A new Header Menu location now appears in Menu Settings. Assign your menu to it and save.

What the arguments do

• theme_location is the key you used in register_nav_menus(). It connects the printed menu to the location that owners assign in the dashboard.
• container set to false removes the extra wrapper element that WordPress adds by default, since you already have a nav element.
• menu_class sets the class on the ul so you can style it.
• depth limits how many levels print. Set it to 2 for one level of sub-menu.
• fallback_cb defaults to a page list when no menu is assigned. Set it to false if you prefer to show nothing.

A basic style for the bar

.site-nav__list {
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav__list a {
	text-decoration: none;
}
.site-nav__list .current-menu-item > a {
	font-weight: 600;
}
.site-nav__list .sub-menu {
	display: none;
	position: absolute;
	list-style: none;
}
.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu {
	display: block;
}

WordPress adds helper classes such as current-menu-item and menu-item-has-children. Use them for active states and sub-menu styling. The :focus-within rule keeps sub-menus reachable from the keyboard.

Make the menu work on mobile

Most visitors will open your site on a phone, so a menu that only works on desktop is half done.

• Block themes handle this inside the Navigation block. Under the overlay menu setting, choose when the menu turns into a toggle button. Test with “Mobile” or “Always” and open the overlay on a small screen.
• Classic themes depend on the theme. Most modern ones include a toggle button. If yours does not, add a button with aria-expanded and a few lines of JavaScript, or a CSS-only approach with a hidden checkbox.
• Tap targets. Give links enough padding so a thumb can hit them without touching the neighbour.
• Sub-menus. Hover does not exist on touch screens. Make sure tapping a parent opens the sub-menu, and consider a separate arrow button for it.
• Test on a real phone. A narrow desktop window is a start, but a real device shows problems with scrolling, fixed headers and the on-screen keyboard.

A simple toggle example

<button class="nav-toggle" aria-expanded="false" aria-controls="site-nav">Menu</button>

<script>
const toggle = document.querySelector( '.nav-toggle' );
const nav = document.getElementById( 'site-nav' );
toggle.addEventListener( 'click', () => {
	const open = toggle.getAttribute( 'aria-expanded' ) === 'true';
	toggle.setAttribute( 'aria-expanded', String( ! open ) );
	nav.hidden = open;
} );
</script>

Give the nav element the matching id="site-nav" and hide the button on wide screens with a media query. Enqueue your script through wp_enqueue_script() in a real theme instead of printing it inline.

Common problems and fixes

The menu does not show on the site

The menu is probably not assigned to a location. In a classic theme, go back to Appearance, Menus, tick the header location and save. In a block theme, check that the Navigation block in the Header template part points at the right menu, and that you saved the template.

There is no Menus item under Appearance

You are probably on a block theme, where menus live in the Site Editor. A classic theme without register_nav_menus() or add_theme_support( 'menus' ) also hides the item. Add the code above or switch to a theme that supports menus.

The menu shows twice

Some themes print a menu in both the header and a mobile panel. Others print a fallback page list in addition to your menu. Check that only one location uses the menu you built, and set fallback_cb to false in custom code.

Changes do not appear

Clear any page cache or caching plugin, and the browser cache. If you use a CDN, purge it too. Menus are saved in the database, so the saved menu is almost always fine, and the old cached page is what you are seeing.

The sub-menu is cut off or hidden

A parent element with overflow: hidden clips sub-menus. Remove the overflow rule from the header, or give the sub-menu a higher z-index and make sure its parent has position: relative.

The menu breaks after a theme update

If you edited the parent theme’s header.php, an update replaced your change. Move custom code to a child theme, or use a small plugin for functions and a child theme for templates.

Menu items do not reflect new pages

New pages are not added to custom menus automatically. Add them from the left column in Appearance, Menus, or from the block settings in the Site Editor. Some classic themes have a setting that adds top-level pages automatically, but that is a theme feature rather than WordPress core.

Accessibility and SEO checks

• Wrap the menu in a nav element and give it an aria-label if the page has more than one.
• Use real links, not buttons that run JavaScript, so crawlers and screen readers can follow them.
• Keep link text short and descriptive. “Pricing” beats “Click here”.
• Make sure the keyboard Tab key moves through every item in order, and that focus is visible.
• Do not hide important pages behind a hover-only sub-menu.

Related guides

Menus are one part of keeping a site healthy. If a plugin or edit leaves you locked out of the dashboard, read how to access WordPress admin after a fatal error. For background jobs that run on every page load, see how to disable WP-Cron, and for a script that sometimes shows up in site audits, see whether to remove the polyfill. If you plan to build the header with a page builder, compare the options in best WordPress page builders.

Frequently asked questions

How do I add a navigation bar to my WordPress header?

Create a menu, then assign it to the header. In a block theme, edit the Header template part in the Site Editor and add a Navigation block. In a classic theme, use Appearance, Menus and tick the header location.

Why is there no Menus option in my dashboard?

Your theme is probably a block theme, where menus are edited in the Site Editor under Appearance, Editor. A classic theme can also hide the item if it does not register any menu location.

How do I register a new menu location?

Call register_nav_menus() on the after_setup_theme hook in your child theme’s functions.php, then print it with wp_nav_menu() in header.php using the same key as theme_location.

How many items should a header menu have?

Aim for five to seven top-level items. Put secondary pages in sub-menus or the footer so the bar stays readable on small screens.

How do I make a sticky header?

In a block theme, set the Header group to a sticky position in the block settings if your version supports it, or add CSS with position: sticky and top: 0. In a classic theme, check whether your theme has a sticky header option before you write CSS.

How do I add a menu item that opens in a new tab?

In a classic menu, enable “Link Target” in Screen Options, then tick “Open link in a new tab” on the item. In the Navigation block, open the link settings and switch on the new tab option. Use it sparingly, because many visitors prefer to choose for themselves.

Do I need a plugin to build a navigation bar?

No. Core WordPress handles menus in both theme types. Plugins are useful for mega menus, advanced mobile menus or sticky effects, but a basic header menu needs none.

Will a menu change affect my SEO?

Yes, in a good way if you keep it simple. A clear menu of real links helps crawlers discover your main pages, and it spreads internal links to the pages you care about. Avoid stuffing it with dozens of links.

Next steps

Build the menu, test it on a phone, and check the keyboard path. If you are choosing a theme with a ready-made header, look at the theme demos to see menu layouts in action, and use the build guides to plan the pages you will link to.