How to create a custom navigation menu in WordPress?

To create a custom navigation menu in WordPress, use the Navigation block in the Site Editor if you have a block theme, or go to Appearance > Menus if you have a classic theme. In both cases, you add pages, posts, categories, or custom links, arrange them in the order you want, create dropdowns by nesting items, and then save the menu so it appears in your header or footer.

A clear menu helps visitors find what they need and helps search engines understand your site's structure. This guide covers both the block theme and classic theme methods step by step, explains how to build dropdowns and mobile menus, and shows developers how to register menu locations, output menus in templates, and customize them with filters.

Why Your Navigation Menu Matters

Your main menu is often the first thing visitors use to explore your site. A well-planned menu:

• Helps visitors quickly reach your most important pages.
• Reduces bounce rates by making it easy to go deeper into your content.
• Gives search engines clear signals about which pages matter most.
• Makes your site feel organized and trustworthy.
• Improves accessibility when built with proper structure and labels.

Before you open the editor, it's worth sketching your menu on paper. Keep the top level short, typically five to seven items, and group related pages under dropdowns.

Method 1: Create a Menu With the Navigation Block (Block Themes)

Block themes, such as Twenty Twenty-Four and Twenty Twenty-Five, don't use the classic Menus screen. Instead, menus are built with the Navigation block, usually placed in the Header template part.

Step 1: Open the Navigation Section

Go to Appearance > Editor and click Navigation in the sidebar. You'll see the menus that already exist on your site. Many block themes automatically create a menu from your published pages.

You can also edit the menu directly in the header: click Patterns > Template Parts > Header, then select the Navigation block.

Step 2: Create a New Menu or Edit an Existing One

1. Select the Navigation block in your header.
2. Open the block settings sidebar and look for the Menu option. Click the three-dot menu next to the menu name.
3. Choose "Create new menu" to start fresh, or pick an existing menu to edit.
4. Rename the menu from the Advanced section or from the Navigation screen, so you can tell your menus apart, for example "Main Menu" or "Footer Menu."

Step 3: Add Menu Items

With the Navigation block selected, click the plus icon inside it to add items:

• Page Link: Search for and select any page on your site.
• Custom Link: Type a URL or search for posts, categories, and tags.
• Submenu: Add a dropdown menu.
• Home Link: A link to your home page.
• Search: A search field or icon.
• Social Icons: Links to your social profiles.
• Page List: Automatically lists all published pages.

You can drag items to reorder them, or use the up and down arrows in the block toolbar. The List View panel (the stacked lines icon in the top toolbar) is especially helpful for rearranging and nesting items.

Step 4: Create Dropdown Submenus

To create a dropdown:

1. Select a menu item that should become the parent, such as "Services."
2. Click the Add submenu icon in the block toolbar.
3. Add child items inside the submenu, such as "Web Design" and "SEO."

In the Navigation block settings, you can choose whether submenus open on hover or on click. "Open on click" is often more accessible, especially for touch screens and keyboard users.

Step 5: Configure the Mobile Menu

The Navigation block has an Overlay Menu setting in its sidebar with three options:

• Mobile: Shows a hamburger icon on small screens only. This is the most common choice.
• Always: Always shows the hamburger icon, even on desktop.
• Off: Never collapses the menu.

You can also style the overlay's background and text colors from the Styles tab.

Step 6: Style and Save

Use the block's Styles tab to adjust typography, colors, spacing between items, and alignment. When you're done, click Save.

Block menus are stored as wp_navigation posts, so you can reuse the same menu in multiple places, such as the header and footer, by selecting it in any Navigation block.

Method 2: Create a Menu in Appearance > Menus (Classic Themes)

If you use a classic theme, the familiar Menus screen is where you'll work.

Step 1: Create the Menu

1. Go to Appearance > Menus.
2. Click create a new menu at the top of the screen.
3. Enter a name like "Main Menu" and click Create Menu.

Step 2: Add Items

On the left side, you'll see panels for Pages, Posts, Custom Links, and Categories. If you don't see a panel you need, such as Tags or a custom post type, click Screen Options at the top of the page and enable it.

1. Check the pages or categories you want.
2. Click Add to Menu.
3. For external sites or anchors, use Custom Links, enter the URL and link text, and click Add to Menu.

Step 3: Arrange Items and Create Dropdowns

Drag items up and down to reorder them. To create a dropdown, drag an item slightly to the right beneath another item. It becomes a "sub item" of the one above it.

You can also expand an item by clicking its arrow to change the Navigation Label (the text shown in the menu) or use the Move links.

Step 4: Assign a Menu Location

At the bottom of the screen, under Menu Settings, choose a Display location such as "Primary Menu" or "Footer Menu." The available locations depend on your theme. Click Save Menu.

You can also manage locations from the Manage Locations tab, or preview menus live under Appearance > Customize > Menus.

Step 5: Use Advanced Menu Properties

Click Screen Options and enable these extra fields:

• Link Target: Open the link in a new tab.
• Title Attribute: Adds a tooltip (use sparingly, since it's not very accessible).
• CSS Classes: Add custom classes to individual items, for example to style a "Contact" item as a button.
• Link Relationship (XFN): Add values like nofollow.
• Description: Some themes display item descriptions in the menu.

Registering Menu Locations in a Classic Theme

If you're developing a classic theme, you need to register the places where menus can appear. Add this to your theme's functions.php, or to your child theme:

function mytheme_register_menus() {
register_nav_menus(
array(
'primary' => __( 'Primary Menu', 'mytheme' ),
'footer'  => __( 'Footer Menu', 'mytheme' ),
'social'  => __( 'Social Links Menu', 'mytheme' ),
)
);
}
add_action( 'after_setup_theme', 'mytheme_register_menus' );

These locations will now appear under Appearance > Menus > Manage Locations.

Displaying a Menu in Your Theme

Output a menu in a template file, such as header.php, using wp_nav_menu():

<nav class="main-navigation" aria-label="<?php esc_attr_e( 'Primary', 'mytheme' ); ?>">
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'menu_id'        => 'primary-menu',
'menu_class'     => 'menu',
'container'      => false,
'depth'          => 2,
'fallback_cb'    => false,
)
);
?>
</nav>

The arguments do the following:

• theme_location: Which registered location to display.
• menu_id and menu_class: The ID and class added to the <ul> element.
• container: Set to false so WordPress doesn't wrap the list in an extra <div>, since we already have a <nav>.
• depth: Limits dropdown levels. 2 means one level of submenus.
• fallback_cb: Set to false so nothing is displayed if no menu is assigned, instead of an automatic page list.

You can check whether a location has a menu assigned before outputting any wrapper markup:

<?php if ( has_nav_menu( 'footer' ) ) : ?>
<nav class="footer-navigation" aria-label="<?php esc_attr_e( 'Footer', 'mytheme' ); ?>">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer',
'depth'          => 1,
'container'      => false,
)
);
?>
</nav>
<?php endif; ?>

Customizing Menus With Filters

WordPress offers several filters that let you modify menus without rewriting templates. Add these to your child theme's functions.php or a small custom plugin.

Add a Login or Logout Link

This snippet appends a login or logout link to the primary menu:

function mytheme_add_login_logout_link( $items, $args ) {
if ( 'primary' !== $args->theme_location ) {
return $items;
}

if ( is_user_logged_in() ) {
$link = sprintf(
'<li class="menu-item menu-item-logout"><a href="%s">%s</a></li>',
esc_url( wp_logout_url( home_url( '/' ) ) ),
esc_html__( 'Log out', 'mytheme' )
);
} else {
$link = sprintf(
'<li class="menu-item menu-item-login"><a href="%s">%s</a></li>',
esc_url( wp_login_url( home_url( '/' ) ) ),
esc_html__( 'Log in', 'mytheme' )
);
}

return $items . $link;
}
add_filter( 'wp_nav_menu_items', 'mytheme_add_login_logout_link', 10, 2 );

Add a CSS Class to Every Menu Item

If you're using a CSS framework that needs specific classes on list items:

function mytheme_menu_item_classes( $classes, $menu_item, $args, $depth ) {
if ( isset( $args->theme_location ) && 'primary' === $args->theme_location ) {
$classes[] = 'nav-item';
}
return $classes;
}
add_filter( 'nav_menu_css_class', 'mytheme_menu_item_classes', 10, 4 );

Add a Class to Menu Links

The nav_menu_link_attributes filter changes attributes on each <a> tag:

function mytheme_menu_link_attributes( $atts, $menu_item, $args, $depth ) {
if ( isset( $args->theme_location ) && 'primary' === $args->theme_location ) {
$atts['class'] = isset( $atts['class'] ) ? $atts['class'] . ' nav-link' : 'nav-link';
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'mytheme_menu_link_attributes', 10, 4 );

For fully custom markup, such as a mega menu, you can extend the Walker_Nav_Menu class and pass your walker via the walker argument of wp_nav_menu(). For most sites, though, filters are simpler and easier to maintain.

Styling Your Menu With CSS

Here's a simple starting point for a horizontal menu with dropdowns in a classic theme. Add it to your child theme's stylesheet or Appearance > Customize > Additional CSS:

.main-navigation .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation .menu li {
  position: relative;
}

.main-navigation .menu a {
  text-decoration: none;
  padding: 0.5rem 0;
  display: block;
}

.main-navigation .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  list-style: none;
  margin: 0;
  padding: 0.5rem 1rem;
  z-index: 100;
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
  display: block;
}

.main-navigation .current-menu-item > a {
  font-weight: 600;
}

The :focus-within selector means dropdowns also open when a keyboard user tabs into them. WordPress automatically adds helpful classes like current-menu-item, current-menu-ancestor, and menu-item-has-children, which you can use to highlight the active page or add dropdown arrows.

For block themes, most styling should be done in the Navigation block's Styles tab or in Global Styles. If you need custom CSS, target classes like .wp-block-navigation-item and .wp-block-navigation__submenu-container.

Creating Different Menus for Different Situations

Sometimes you want different menus in different places:

• Footer menus: Add a second Navigation block to your footer template part and select a different menu, or assign a menu to the footer location in a classic theme.
• Logged-in vs. logged-out users: Plugins such as Menu Items Visibility Control or If Menu let you show items conditionally. The login/logout snippet above handles the simplest case.
• Per-page menus: In a block theme, create a custom template with a different header part that uses another menu.

Menu Best Practices

Keep labels short and clear: Use words visitors understand, like "Pricing" or "Contact," rather than clever phrases.

Limit top-level items: Too many choices overwhelm visitors. Group related pages in dropdowns.

Put important links first and last: People tend to notice the first and last items most.

Make it accessible: Use a <nav> element with an aria-label, ensure keyboard access, and keep good color contrast.

Test on mobile: Check that the hamburger menu opens and closes correctly and that dropdowns work on touch devices.

Avoid dead links: When you delete or rename a page, check your menus. Custom links in particular won't update automatically.

---

FAQ: Custom Navigation Menus in WordPress

---

Conclusion

Creating a custom navigation menu in WordPress is straightforward once you know which tool your theme uses. Block themes rely on the Navigation block in the Site Editor, where you can add links, submenus, and mobile overlays visually. Classic themes use Appearance > Menus, where you build a menu and assign it to a theme location.

Plan your menu structure first, keep it short and clear, and test it on both desktop and mobile. If you're a developer, register_nav_menus(), wp_nav_menu(), and a few well-chosen filters give you full control over how menus are registered, displayed, and styled. With a thoughtful menu in place, your visitors will find what they need faster.