Create a Dropdown Menu in WordPress (5 Methods)

A clean navigation helps people get where they’re going. A dropdown menu in WordPress keeps your header compact while exposing depth on demand. In this guide, you’ll build one five different ways—using the Menus screen, the Site Editor, block patterns, a plugin (for mega menus), or a touch of CSS. Along the way, we’ll cover mobile patterns, accessibility, and fixes for common snags. If you’re pairing a new menu with a refreshed hero, see how to hide the page title for hero redesigns. Good typography also matters—your menu reads better after a quick pass through change fonts in WordPress.

Overview

Dropdowns vs. mega menus is a simple trade:

Use a standard dropdown when you have a shallow hierarchy. Reach for a mega menu in WordPress when categories need grouping. Either way, keep keyboard navigation and focus styles first-class. People should be able to tab through, open submenus with the keyboard, and see where focus is at all times.

Create a dropdown quickly with MicroEdits

If you want it done without touching code, MicroEdits is the fast lane. Describe what you want in plain English—something like Add a “Shop” menu with Shoes, Bags, and Accessories. Open on hover, and make the submenu 12rem wide.—and it appears on your existing site. You can preview the change across breakpoints, share it for approval, and apply it instantly. It works on any platform you’re already using, WordPress included.

MicroEdits is designed for non‑technical users. No theme spelunking, no plugin conflicts, no copying and pasting code. It feels like magic because it is: you say it, it happens. You can also layer in third‑party tools easily—think Calendly in the menu, a Google Map link, or Hotjar tracking—without getting tangled up in settings.

When you’re happy, you apply the change site‑wide and can revert any time. If you’re planning a mobile menu or a simple promo dropdown, it’s the fastest way from idea to live.

Core methods

Below are five solid ways to create a dropdown menu in WordPress. Pick the one that matches your theme and comfort level.

1) Appearance → Menus (Classic themes)

• Go to Appearance → Menus.
• Create a new menu (e.g., “Primary”).
• Add pages/categories/custom links to the menu.
• Drag items slightly right under a parent item to nest them (that’s your dropdown).
• Assign the menu to your header location (Primary/Top).
• Save.

Reference: WordPress docs on the Menus screen.

2) Appearance → Editor (Site Editor for block themes)

• Go to Appearance → Editor.
• Open your Header template or template part.
• Insert or select the Navigation block.
• Add links and drag to indent under a parent to create submenus.
• Save the template.

Reference: WordPress Navigation block.

3) Use a block pattern (Headers with dropdowns)

• In the Site Editor, replace your header with a built‑in header pattern that already contains a Navigation block.
• Swap placeholder links with your own and re‑nest as needed.
• Save. Patterns are a fast way to get spacing and responsive behavior dialed in.

4) Plugin approach (for a mega menu in WordPress)

• Install a reputable mega menu plugin.
• Convert your existing menu location to a “mega” and configure columns, icons, and images.
• Keep it restrained. Aim for clarity over decoration.

Tip: Test on mobile. Large menus must collapse gracefully into a mobile menu in WordPress without overwhelming the screen.

5) Minimal HTML + CSS (theme‑agnostic)

This approach is light and accessible if done carefully.

<nav aria-label="Primary">
  <ul class="menu">
    <li class="has-submenu">
      <a href="/shop">Shop</a>
      <ul class="submenu">
        <li><a href="/shop/shoes">Shoes</a></li>
        <li><a href="/shop/bags">Bags</a></li>
        <li><a href="/shop/accessories">Accessories</a></li>
      </ul>
    </li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

.menu,
.submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu > li {
  position: relative;
}
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  background: #fff;
  border: 1px solid #e5e5e5;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu a {
  display: block;
  padding: 0.625rem 0.875rem;
  text-decoration: none;
}
.menu a:focus-visible {
  outline: 2px solid #0a66ff;
  outline-offset: 2px;
}

Accessibility note: using :focus-within ensures the submenu opens while tabbing. For semantics, site navigation typically should not use ARIA menu roles; see W3C guidance on keyboard‑accessible menus.

Styling and behavior

A few small touches make the difference between fussy and effortless.

• Hover intent delay (desktop): Avoid instant pop on fly‑by hovers.

/* Default closed state with smooth transition */
.submenu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
/* Delay opening a hair on hover to reduce jitter */
@media (hover: hover) {
  .has-submenu:hover > .submenu {
    transition-delay: 0.12s;
  }
}
/* On touch devices, no delay */
@media (hover: none) {
  .has-submenu:hover > .submenu {
    transition-delay: 0s;
  }
}

• Caret icons: Add a subtle indicator that an item opens.

.has-submenu > a::after {
  content: "";
  display: inline-block;
  margin-left: 0.375rem;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}

• Touch targets: Make links easy to hit.

.menu a {
  padding: 0.75rem 1rem;
}
@media (pointer: coarse) {
  .submenu a {
    padding: 0.875rem 1rem;
  }
}

• Focus styles: Always visible and high‑contrast.

.menu a:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

For reference on focus behavior, see MDN’s :focus-within.

Mobile patterns

On small screens, prioritize clarity:

• Hamburger menu in WordPress: The Navigation block includes a responsive toggle that collapses into a button. Use that if you’re on a block theme.
• Off‑canvas drawer: Slide a panel from the left/right with your menu stacked in an accordion. Keep focus trapped inside and restore focus to the opener when closed.
• Accordion submenus: Tapping the parent reveals children beneath it.

A simple mental model:

[ ☰ ]  ──>  [Overlay] ──>  [Panel: Menu]
   ↑             ↑                ↑
 opener     body scroll     focus inside panel
  focus        locked           until Close

If you later add promotional overlays or announcements, see this guide on creating a WordPress popup so your mobile menu and popup don’t compete.

Troubleshooting

• Submenu hidden behind header (z‑index):

header {
  position: relative;
  z-index: 30;
}
.submenu {
  z-index: 40;
}

• Clipped by container overflow:

.site-header,
.menu-wrap {
  overflow: visible;
}

• Sticky menu in WordPress jumps or overlaps:

header.is-sticky {
  position: sticky;
  top: 0;
  will-change: transform;
}
body.has-open-menu {
  overflow: hidden;
} /* lock scroll on mobile */

• Theme conflicts (transform on ancestors): A parent element with transform can create a new stacking context. Remove or relocate transforms on header wrappers if submenus won’t rise above content.

• Submenu too wide on mobile: Switch to accordion below a breakpoint and increase touch targets. Avoid hover-only triggers.

FAQ

What’s the difference between a dropdown and a mega menu in WordPress?

A dropdown menu in WordPress is a simple, single‑column list that appears under a parent item. A mega menu spreads links across multiple columns (and sometimes images or promos). Use a mega menu in WordPress when you have many siblings and need grouping; otherwise, a standard dropdown is faster to scan and maintain.

Are dropdown menus good for SEO?

They’re neutral to positive when done right. A clean dropdown improves internal linking and discoverability, which can help. Avoid burying critical pages three layers deep, keep the HTML readable, and ensure links are keyboard accessible. Don’t stuff every page in the header—prioritize the routes that matter.

How do sticky headers affect dropdowns?

A sticky menu in WordPress keeps navigation visible while scrolling. Ensure the header and submenu have sensible stacking (z‑index) so submenus render above content. On mobile, lock body scroll when the menu is open to prevent the page from moving behind the panel. Test on devices and keyboard.

How do I make a hamburger menu in WordPress?

If you’re on a block theme, use the Navigation block’s responsive toggle. It automatically converts to a hamburger menu in WordPress at smaller widths. Classic themes can use a light plugin or a header pattern that includes a toggle. Keep the label clear, focus managed, and panel content scrollable.

Do I need a mega menu plugin?

Only if you truly need groups and columns. A plugin helps you build a mega menu in WordPress quickly, but it’s heavier than a simple dropdown. Start small; if users can’t find what they need, graduate to a mega menu with concise group labels and no decorative bloat.

What about jump links in WordPress for long pages?

Jump links (anchor links) are great for on‑page navigation—e.g., “Features,” “Pricing,” “FAQ.” Add an anchor id to the section and link to it from your menu (like /pricing#faq). They reduce scroll fatigue and pair nicely with sticky headers; just add top offset so the header doesn’t cover the target.

How do I keep menus accessible?

• Support keyboard: Tab to a parent, open the submenu, move through children, and close with Escape.
• Provide visible focus styles.
• Use clear labels and ample touch targets.
• Follow W3C guidance for keyboard‑accessible menus. Avoid ARIA menu roles for site navigation; plain links are usually correct.