WordPress Menus and Navigation — Menu Locations, Custom Links and Mega Menus

In this tutorial, you'll learn to create and manage WordPress navigation menus — using the Menu editor, adding custom links, creating dropdown submenus, assigning menu locations, and implementing advanced techniques like custom walkers and mega menus.

What You'll Learn

• What menus are (navigation links in header, footer, and other areas)
• The Menu editor interface (Appearance > Menus)
• Creating a new menu from scratch
• Adding menu items: pages, posts, custom links, categories
• Configuring menu item settings (link text, title attribute, new tab, CSS classes)
• Drag-and-drop reordering and creating submenus
• Assigning menus to theme-defined locations (Primary, Footer, Social)
• Managing menus: edit, delete, duplicate
• Custom Walker for advanced menu markup (PHP class extending Walker_Nav_Menu)
• Mega menus (plugins and custom development approaches)
• Responsive mobile menus and best practices

Why It Matters

Navigation is the backbone of user experience. A well-organized menu helps visitors find content quickly, improves SEO through internal linking, and guides users through your site's conversion funnel. As a developer, you will frequently customize menus for clients — adding mega menus for e-commerce, creating multi-level navigation for information-heavy sites, and ensuring menus work on mobile devices. Understanding menu locations, custom walkers, and responsive patterns is essential.

Real-World Use

A university website needs a main navigation with top-level departments, each expanding into sub-items (courses, faculty, research), plus a "Quick Links" mega menu in the footer showing admissions, calendar, library, and athletics. Using the Menu editor, the admin creates a hierarchical menu. For the mega menu, a custom Walker_Nav_Menu class adds dropdown columns with images and descriptions. The primary menu is assigned to the "Primary" location, and the quick links go to the "Footer" location.

Learning Path

flowchart LR
  A[Theme Anatomy] --> B[Installing Themes]
  B --> C[Full Site Editing]
  C --> D[Customizer]
  D --> E[Widgets]
  E --> F[Menus]
  F --> G[Child Themes]
  G --> H[Template Hierarchy]
  H --> I[CSS Customization]
  style F fill:#4a90d9,color:#fff

What Are Menus?

WordPress menus are navigational link collections that you create in the admin and display in theme locations (header, footer, sidebar). Menus support:

• Hierarchical nesting (parent > child > grandchild)
• Links to pages, posts, custom post types, categories, or any URL
• Custom CSS classes per menu item
• Link targets (open in new tab)
• Title attributes for Accessibility

The Menu Editor

Access the Menu editor via Appearance > Menus in the WordPress admin.

Screen Layout

• Left column: Available items (Pages, Posts, Custom Links, Categories)
• Right column: Menu structure (your current menu)
• Bottom: Menu Settings (theme locations)
• Top: Menu name and "Create Menu" button

Enabling Advanced Options

Click Screen Options in the top right and check:

• CSS Classes — Add custom classes per menu item
• Link Target — Open links in new tab
• Title Attribute — Tooltip text on hover
• Description — Description text below link

These are hidden by default to keep the interface simple.

Creating a New Menu

1. Go to Appearance > Menus.
2. Enter a Menu Name (e.g., "Primary Navigation").
3. Click Create Menu.
4. On the left, select items to add (Pages, Posts, Custom Links).
5. Click Add to Menu.
6. Drag items to reorder.
7. Click Save Menu.

After saving, assign the menu to a Display Location (see "Menu Locations" section).

Adding Menu Items

Pages

Check the boxes next to pages and click Add to Menu. All pages appear here by default. Use the search to find specific pages.

Posts

Click the Posts tab, check individual posts, and add them. This is useful for linking to featured or important articles.

Custom Links

Use custom links for any URL — external sites, anchor links, or pages not in the Pages list:

URL: https://example.com
Link Text: Visit Example

Categories

Click the Categories tab to add archive pages for specific categories. This links to the category archive page showing all posts in that category.

Menu Item Settings

Each menu item has settings that appear when you click the dropdown arrow:

• Navigation Label — The visible link text (defaults to page title)
• Title Attribute — Tooltip text shown on hover (accessibility)
• Open in New Tab — Check to set target="_blank"
• CSS Classes — Add space-separated custom CSS classes
• Link Relationship (XFN) — For microformats
• Description — Text displayed below the link (theme-dependent)

Example: External Link with New Tab

Navigation Label: Our Partners
URL: https://partner-site.com
☑ Open in new tab
CSS Classes: external-link

Drag-and-Drop Reordering and Submenus

To reorder: drag any menu item up or down.

To create a submenu (dropdown): drag an item slightly to the right. The indentation indicates it is a child of the item above.

About Us          ← Parent (top level)
  Our Team        ← Child (dropdown)
  Our History     ← Child (dropdown)
  Careers         ← Child (dropdown)
Services          ← Parent (top level)
  Web Design      ← Child
  Development     ← Child
Contact           ← Parent

You can nest up to 4 levels deep (the theme's CSS determines how many levels display).

Menu Locations

Menu locations are defined by the theme in functions.php using register_nav_menus():

function my_theme_menus() {
    register_nav_menus(
        array(
            'primary' => __( 'Primary Menu', 'my-theme' ),
            'footer'  => __( 'Footer Menu', 'my-theme' ),
            'social'  => __( 'Social Links', 'my-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_theme_menus' );

In the Menu editor, the Menu Settings section at the bottom shows available locations. Check the box next to the location you want to assign.

Displaying Menus in Templates

<?php
wp_nav_menu(
    array(
        'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
        'container'      => 'nav',
        'container_class'=> 'main-navigation',
        'fallback_cb'    => false,
    )
);
?>

Parameters:

• theme_location — Matches the ID in register_nav_menus()
• menu_class — CSS class on the
  • container — Wrapper element (nav, div, or false for none)
  • fallback_cb — What to show if no menu is assigned (false = nothing)

  Managing Menus

  • Edit — Click a menu name in the top dropdown to switch and edit
  • Delete — Click "Delete Menu" at the bottom of the Menu editor
  • Duplicate — WordPress has no built-in duplicate. Use a plugin or manually recreate. Or copy the theme location assignment.

  Menus are stored as custom post types (nav_menu_item). Deleting a menu removes all its items.

  Custom Walker for Advanced Menus

  A Custom Walker lets you override how WordPress renders menu HTML. This is essential for adding icons, descriptions, images, or custom markup.

  Basic Custom Walker

  class My_Custom_Walker extends Walker_Nav_Menu {
      public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
          $output .= '<li class="menu-item menu-item-depth-' . $depth . '">';
          $output .= '<a href="' . esc_url( $item->url ) . '" class="menu-link">';
  
          // Add icon if CSS class 'has-icon' is present
          if ( in_array( 'has-icon', $item->classes ) ) {
              $output .= '<span class="menu-icon" aria-hidden="true"></span>';
          }
  
          $output .= '<span class="menu-text">' . esc_html( $item->title ) . '</span>';
  
          if ( $item->description ) {
              $output .= '<span class="menu-description">' . esc_html( $item->description ) . '</span>';
          }
  
          $output .= '</a>';
      }
  
      public function end_el( &$output, $item, $depth = 0, $args = array() ) {
          $output .= '</li>';
      }
  }
  

  Using the custom walker:

  wp_nav_menu(
      array(
          'theme_location' => 'primary',
          'walker'         => new My_Custom_Walker(),
      )
  );
  

  When to Use a Custom Walker

  • Adding icons or images to menu items
  • Displaying menu item descriptions
  • Building mega menu HTML structure with columns
  • Adding data attributes for JavaScript
  • Customizing the wrapping container

  Mega Menus

  Mega menus display multiple columns of links, images, and content in a wide dropdown.

  Plugin Approach

  Popular mega menu plugins:

  • Max Mega Menu — Converts existing menus into mega menus with drag-and-drop setup
  • UberMenu — Feature-rich with custom layouts
  • WP Mega Menu — Free option with column support

  Custom Development Approach

  A custom mega menu uses a Custom Walker combined with CSS:

  1. Mark certain menu items as "mega" (via CSS class).
  2. In the Walker, detect the mega class and output column markup.
  3. Style with CSS display: grid or Flexbox for column layout.

  Basic CSS for a mega menu:

  .mega-menu {
      position: absolute;
      width: 100%;
      left: 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
      padding: 2rem;
      background: #fff;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
  }
  
  .menu-item-has-children:hover .mega-menu {
      opacity: 1;
      visibility: visible;
  }
  

  Responsive Mobile Menus

  Mobile menu patterns fall into three categories:

  1. CSS-only Toggle (Hamburger)

  .menu-toggle {
      display: none;
  }
  
  @media (max-width: 768px) {
      .menu-toggle {
          display: block;
      }
      .primary-menu {
          display: none;
      }
      .primary-menu.toggled {
          display: block;
      }
  }
  

  document.querySelector('.menu-toggle').addEventListener('click', function() {
      document.querySelector('.primary-menu').classList.toggle('toggled');
  });
  

  2. Off-Canvas Menu

  The menu slides in from left or right, pushing content. Most themes handle this with JavaScript plugins.

  3. Priority Menu

  On mobile, only the most important items show. A "More" dropdown reveals the rest. Implemented with JavaScript calculations based on available width.

  Accessibility Considerations

  • Use aria-expanded and aria-controls attributes
  • Keyboard navigation: Enter to expand, Escape to close
  • Focus trap: Keep focus inside the open menu
  • Skip links: Allow keyboard users to skip navigation

  Common Mistakes

  1. Not assigning the menu to a location — Creating a menu does not display it. You must check a theme location under Menu Settings or it will not appear anywhere.

  2. Creating too many nesting levels — Most themes only support 2-3 levels of dropdowns. Deeper nesting may be cut off or hidden by CSS overflow constraints.

  3. Forgetting fallback_cb => false — If no menu is assigned, wp_nav_menu() displays a list of ALL pages by default. Set 'fallback_cb' => false to show nothing.

  4. Hardcoding menu HTML — Manually writing

     • links in header.php instead of using wp_nav_menu() means the client cannot edit the menu from the admin.

     • Ignoring mobile responsiveness — Desktop mega menus often fail on mobile. Always test with touch events and small viewports. Use CSS media queries to convert mega menus to stacked lists on mobile.

  Practice Questions

  1. How do you create a dropdown submenu in the WordPress Menu editor? What are the nesting limits?

  2. What is the difference between register_nav_menus() and wp_nav_menu() in terms of when and where you use each?

  3. When would you use a custom Walker class instead of the default menu output?

  Challenge: Create a theme or use an existing one. Register three menu locations: "Primary", "Footer", "Social". In the admin, create a "Main Menu" with at least 8 items, including submenus (3 items deep). Assign it to Primary. Create a "Footer Links" menu with 4 items, assign to Footer. Create a "Social Menu" with 3 external links (open in new tab) using Custom Links. In your theme template, display all three menus. Write CSS to style the Primary menu as horizontal with dropdowns, and style the Social menu as icon-only.

  FAQ

  Why is my menu not showing up on the site?

  Two common causes: (1) you did not assign the menu to a theme location under Appearance > Menus > Menu Settings, or (2) your theme does not call wp_nav_menu() with the correct theme_location. Check both.

  How do I add a search bar inside my menu?

  Use a plugin (like "WP Menu Search") or add a Custom Link with a hash (#) URL and use jQuery to attach a search toggle. Alternatively, add the search block to the menu via a custom walker.

  Can I have different menus for different pages?

  Yes. Use conditional logic with wp_nav_menu() and is_page() or is_single(). For example, you can display a different menu on the blog section using if ( is_home() ) { wp_nav_menu( array( 'menu' => 'Blog Menu' ) ); }.

  Mini Project

  Build a complete navigation system for a multi-section website:

  1. Register four menu locations: "Primary", "Secondary", "Footer", "Mobile".
  2. Create a "Main Menu" with 5 top-level items. Three of them should have sub-items (2-3 each).
  3. Assign this menu to Primary and Mobile locations.
  4. Create a "Footer Menu" with links to Privacy Policy, Terms of Service, Sitemap, Contact.
  5. In your theme, use wp_nav_menu() to display all menus.
  6. Write CSS for:
     • Primary: Horizontal bar with dropdown submenus on hover
     • Mobile: Off-canvas panel triggered by hamburger icon at <768px
     • Footer: Horizontal centered links
  7. Add a Custom Walker that prepends a dashicon to each menu item based on its CSS class.
  8. Ensure keyboard navigation works: Tab to navigate items, Enter to follow links, Escape to close submenus.

  Verify all menus work on desktop, tablet, and mobile viewports.

  What's Next

  With navigation skills in place, learn child themes to safely customize any theme's menus and templates. Then master the template hierarchy to understand which files control which pages. Finally, refine your design with CSS customization.