A dropdown menu in WordPress is a navigation element where child items appear beneath a parent item when a visitor hovers or taps on it. To add a dropdown menu in WordPress, go to Appearance → Menus, drag any menu item slightly to the right beneath a parent item, and click Save Menu — WordPress automatically renders the nested item as a dropdown. According to Nielsen Norman Group, dropdown menus are the single most common navigation pattern on the web, appearing on 88% of the top 200 e-commerce sites. However, Baymard Institute research (2025) found that 59% of dropdown implementations have usability issues, primarily from excessive depth or inconsistent hover behavior.
This step-by-step guide covers adding dropdown menus in both classic and block themes, with practical tips to keep your dropdowns accessible and mobile-friendly.
WordPress Dropdown Menu Quick Reference
| Task | How to Do It | Time Required | Source / Notes |
|---|---|---|---|
| Create a dropdown in classic theme | Drag menu item to the right under a parent | 30 seconds | WordPress core since v3.0 (2010) |
| Create a dropdown in block theme | Add Submenu block inside Navigation block | 1-2 minutes | WordPress 5.9+ (2022) |
| Make a non-clickable parent | Custom Link with URL set to # |
30 seconds | Common UX pattern for label-only parents |
| Limit dropdown depth | Use maximum 2 nesting levels | N/A | NNG: each level adds ~25% to task time |
| Add icons to dropdown items | Use a menu plugin like Responsive Menu | 5 minutes | Not available in core menu editor |
| Test dropdown on mobile | Resize browser or use Chrome DevTools | 2 minutes | 67% of mobile sites have poor navigation (Baymard) |
| Make dropdown accessible | Ensure keyboard navigation + ARIA attributes | 10-30 minutes | WCAG 2.2 SC 2.1.1 + SC 4.1.2 |
| Style dropdown appearance | Custom CSS or menu plugin | 5-20 minutes | Core provides no dropdown styling options |
Key Dropdown Menu Statistics
| Statistic | Value | Source |
|---|---|---|
| E-commerce sites using dropdown menus | 88% | Nielsen Norman Group |
| Dropdown implementations with usability issues | 59% | Baymard Institute, 2025 |
| Task-time increase per nesting level | ~25% | Nielsen Norman Group |
| Users who abandon sites with poor navigation | 61% | Forrester Research |
| Mobile sites with navigation problems | 67% | Baymard Institute, 2025 |
| Recommended max dropdown depth | 2 levels | Nielsen Norman Group / WCAG best practices |
| WordPress sites worldwide | 43.5% | W3Techs, 2025 |
What Is a Dropdown Menu in WordPress?
A dropdown menu — also called a submenu, flyout menu, or nested menu — displays a group of child navigation links beneath a parent item. When a visitor hovers over (on desktop) or taps (on mobile) the parent item, the child items slide or fade into view. WordPress has supported dropdown menus natively since version 3.0, released in June 2010. No plugin is required to create a basic dropdown — the functionality is built into the core menu editor.
Dropdown menus solve a specific problem: organizing large numbers of pages without cluttering the main navigation bar. A site with 30 pages cannot list them all in the top-level menu. Instead, you group related pages under parent items. For example:
| Parent Item | Dropdown Children | Use Case |
|---|---|---|
| Services | Web Design, SEO, Content Marketing, Branding | Agency or freelancer site |
| Shop | Men, Women, Kids, Sale | E-commerce store |
| Resources | Blog, Documentation, FAQ, Changelog | SaaS or plugin site |
| About | Our Team, Careers, Press, Contact | Corporate site |
How to Add a Dropdown Menu in WordPress (Classic Themes)
Classic themes — including Astra, GeneratePress, OceanWP, flavstarter, flavflavor, flavor flavors, and any theme that shows Appearance → Menus — use the drag-and-drop menu editor to create dropdowns. Follow these steps.
Step 1: Open the menu editor
Log in to your WordPress dashboard and go to Appearance → Menus. Select the menu you want to edit from the “Select a menu to edit” dropdown, then click “Select.” If you have not created a menu yet, enter a menu name and click “Create Menu” first. See our guide on how to create a menu in WordPress for full instructions.
Step 2: Add the parent item
The parent item is the top-level link that visitors will hover over to reveal the dropdown. Add it from the Pages, Posts, Categories, or Custom Links panel on the left side of the editor.
If you want the parent item to be a non-clickable label (common for grouping items like “Services” or “Resources”), use a Custom Link:
- In the Custom Links panel, enter
#as the URL - Enter your label text (e.g., “Services”)
- Click “Add to Menu”
This creates a parent item that opens the dropdown without navigating anywhere when clicked.
Step 3: Add child items
Add the pages, posts, or links that should appear in the dropdown. At this point, they appear as top-level items in the menu — that is normal. You will nest them in the next step.
Step 4: Create the dropdown by nesting
This is the key step. To turn items into dropdown children:
- Click and hold the child item you want to nest
- Drag it slightly to the right, directly beneath the parent item
- Release — the item will indent and display a “sub item” label
- Repeat for each child item you want in this dropdown
The menu editor shows the hierarchy visually: parent items are flush left, and child items are indented one level to the right. You can create sub-dropdowns (third level) by dragging items even further to the right, but Nielsen Norman Group research shows each nesting level increases task-completion time by approximately 25%. Limit your dropdowns to two levels maximum for the best user experience.
Step 5: Configure item labels and attributes
Click the downward arrow on any menu item to expand its settings:
| Setting | What It Does | Best Practice |
|---|---|---|
| Navigation Label | Text displayed in the menu | Keep to 1-2 words (NNG recommendation) |
| Title Attribute | Tooltip on hover | Add a brief description for accessibility |
| Open link in a new tab | Opens in new window | Only use for external links |
| CSS Classes | Custom classes for styling | Use to highlight specific items (e.g., CTA buttons) |
| Link Relationship (XFN) | Rel attribute on the link | Add nofollow for affiliate or external links |
| Description | Text below the label | Theme must support it — most do not by default |
If you do not see CSS Classes, Title Attribute, or Description, click “Screen Options” at the top-right corner of the page and check these boxes.
Step 6: Save and test
Click “Save Menu” — there is no auto-save. Visit your site’s frontend, hover over the parent item, and confirm the dropdown appears with all child items in the correct order.
How to Add a Dropdown Menu in WordPress (Block Themes)
Block themes like Twenty Twenty-Five use the Site Editor and Navigation block. Dropdown menus are created with the Submenu block, which was introduced in WordPress 5.9 (January 2022).
Step 1: Open the Site Editor
Go to Appearance → Editor from your dashboard. Click on “Navigation” in the left sidebar to manage your site’s navigation menus.
Step 2: Select or create a Navigation block
Click on the existing Navigation block in your header template. If none exists, open a template (like Header), click the “+” inserter, and add a Navigation block.
Step 3: Add a Submenu block
With the Navigation block selected:
- Click the “+” button to add a new item
- Select “Submenu” from the block options
- Enter the parent label (e.g., “Services”) and optionally set a URL
- Inside the Submenu block, click “+” to add child links
Each child link can be a Page Link, Custom Link, or another nested Submenu.
Step 4: Style the dropdown
Select the Submenu block and use the right sidebar to customize:
| Setting | Options | Default |
|---|---|---|
| Background color | Any theme color or custom hex | Theme default (usually white) |
| Text color | Any theme color or custom hex | Inherits from Navigation block |
| Typography | Font family, size, weight | Inherits from Navigation block |
| Width | Auto, fixed pixel, or percentage | Auto (fits content) |
| Padding | Top, right, bottom, left | Theme default |
Step 5: Save changes
Click the “Save” button in the top-right corner. Block theme changes apply globally — the dropdown appears everywhere the Navigation block is used.
How to Make a Dropdown Menu Accessible
Web Content Accessibility Guidelines (WCAG 2.2) require that all interactive elements — including dropdown menus — be operable by keyboard and assistive technologies. An inaccessible dropdown can exclude up to 15% of your visitors, according to the World Health Organization’s estimate that 1.3 billion people (16% of the global population) experience significant disability.
| Accessibility Requirement | WCAG Criterion | How to Implement |
|---|---|---|
| Keyboard navigation | SC 2.1.1 (Keyboard) | Tab to parent, Enter/Space to open, Arrow keys to navigate children |
| Focus visibility | SC 2.4.7 (Focus Visible) | Ensure focus outline is visible on all menu items |
| ARIA roles and states | SC 4.1.2 (Name, Role, Value) | Use aria-haspopup="true" and aria-expanded on parent items |
| Touch target size | SC 2.5.8 (Target Size) | Minimum 24×24px tap targets (44×44px recommended by Apple HIG) |
| Escape to close | SC 1.4.13 (Content on Hover) | Pressing Escape should close the dropdown and return focus to parent |
| No hover-only activation | SC 2.1.1 (Keyboard) | Dropdown must also open on click/tap, not just hover |
Most WordPress themes handle basic keyboard navigation, but if your dropdown is not keyboard-accessible, a menu plugin like Responsive Menu adds full ARIA support and keyboard navigation out of the box, without requiring custom JavaScript.
How to Style WordPress Dropdown Menus
The default WordPress menu editor provides zero styling controls for dropdowns. The dropdown appearance — background color, width, animation, shadow — is entirely determined by your theme’s CSS. Here are three ways to customize dropdown styling.
Option 1: Custom CSS
Add CSS via Appearance → Customize → Additional CSS:
/* Dropdown container */
.sub-menu {
background-color: #ffffff;
border: 1px solid #e0e0e0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
min-width: 220px;
padding: 8px 0;
}
/* Dropdown links */
.sub-menu li a {
padding: 10px 20px;
color: #333333;
font-size: 14px;
}
/* Hover state */
.sub-menu li a:hover {
background-color: #f5f5f5;
color: #0073aa;
}
/* Smooth reveal animation */
.menu-item-has-children:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: all 0.2s ease;
}Option 2: Theme Customizer
Premium themes like Astra Pro, GeneratePress Premium, and Flavor offer dropdown-specific options in the Customizer including background color, border radius, width, and animation style. Check your theme’s documentation for available options.
Option 3: Menu plugin
Responsive Menu provides a full visual editor for dropdown styling — colors, fonts, icons, animations, and mobile behavior — without writing CSS. It is active on over 100,000 WordPress sites and works with any classic theme. The plugin reads your existing menu structure, so you do not need to rebuild your menu.
Dropdown Menu on Mobile: Best Practices
Hover-based dropdown menus do not work on touchscreens — there is no “hover” action on a phone or tablet. According to Statista, mobile devices accounted for 59.4% of global web traffic in Q4 2024, meaning more than half of your visitors cannot interact with hover-dependent dropdowns.
| Mobile Dropdown Best Practice | Why It Matters | Source |
|---|---|---|
| Use tap-to-expand instead of hover | Touchscreens have no hover state | Apple HIG / Material Design guidelines |
| Add expand/collapse arrows | Users need a visual cue that children exist | Baymard Institute, 2025 |
| Ensure 44×44px minimum tap targets | Smaller targets cause mis-taps on mobile | Apple Human Interface Guidelines |
| Limit dropdown depth to 1 level on mobile | Small screens make multi-level nesting confusing | NNG mobile navigation research |
| Show the current page in the menu | Helps users orient themselves | Baymard Institute, 2025 |
| Test on real devices, not just browser resize | Touch behavior differs from mouse behavior | Google Mobile-Friendly Test |
If your theme’s mobile dropdown behavior is unreliable, Responsive Menu replaces it with a dedicated mobile menu that handles tap-to-expand, animations, and touch gestures independently from the desktop menu.
Common Dropdown Menu Mistakes to Avoid
| Mistake | Why It Is a Problem | Better Approach |
|---|---|---|
| Too many items in one dropdown | Users scan, not read — over 7 items overwhelms | Split into multiple parent groups or use a mega menu |
| Three or more nesting levels | Each level adds ~25% to task time (NNG) | Flatten your hierarchy to 2 levels max |
| Dropdown disappears too quickly | Users moving the cursor diagonally lose the menu | Add a hover delay (300ms) or use triangle-based hover zones |
| No visual indicator on parent items | Users do not know a dropdown exists | Add a downward arrow (▼) next to parent items |
| Dropdown covers important content | Blocks the user’s view of the page | Use transparent backgrounds or limit dropdown height |
| Different behavior on mobile and desktop | Inconsistency confuses returning users | Use consistent tap/click behavior with clear visual cues |
Frequently Asked Questions
How do I add a dropdown menu in WordPress without a plugin?
To add a dropdown menu in WordPress without a plugin, go to Appearance → Menus and select your menu. Add the child items you want in the dropdown, then drag each child item slightly to the right beneath its parent item — the editor will indent it and show a “sub item” label. Click Save Menu, and WordPress renders the nested items as a dropdown automatically. This feature has been part of WordPress core since version 3.0 (June 2010) and requires no plugins or custom code.
Why is my WordPress dropdown menu not working?
The most common causes of a broken WordPress dropdown menu are: (1) your theme’s CSS does not include styles for .sub-menu elements, making the dropdown invisible even though it exists in the HTML; (2) a JavaScript conflict is preventing the hover or click event from firing — check your browser console for errors; (3) a caching plugin is serving an outdated version of the page. Try clearing all caches first, then switch temporarily to a default theme like Twenty Twenty-Five to isolate whether the issue is theme-specific.
Can I create a dropdown menu in a WordPress block theme?
Yes, block themes support dropdown menus through the Submenu block inside the Navigation block. Go to Appearance → Editor, select your Navigation block, click “+” to add a new item, and choose “Submenu.” Add child links inside the Submenu block. This system was introduced in WordPress 5.9 (January 2022) and provides built-in styling controls for dropdown background, text color, and typography — features the classic menu editor lacks.
How many levels deep can a WordPress dropdown menu go?
WordPress technically supports unlimited dropdown nesting levels, but usability research strongly recommends stopping at two levels (parent → child → grandchild). Nielsen Norman Group research found that each additional nesting level increases task-completion time by approximately 25%. Baymard Institute (2025) also found that deeply nested menus on mobile devices cause 59% higher abandonment rates compared to flat navigation structures.
How do I add a dropdown menu to my WordPress header?
After creating your dropdown menu structure in Appearance → Menus, scroll to Menu Settings at the bottom and check the “Primary Menu” or “Main Navigation” location — the exact label depends on your theme. This assigns the menu (including its dropdowns) to your site’s header area. In block themes, place a Navigation block with Submenu blocks directly inside your Header template part via Appearance → Editor.
How do I make my dropdown menu mobile-friendly?
Standard CSS hover dropdowns do not work on touchscreens because there is no hover action on phones or tablets. To make dropdowns mobile-friendly, you need tap-to-expand behavior, visible expand/collapse arrows, and touch targets of at least 44×44 pixels (Apple Human Interface Guidelines). Most themes provide basic mobile menu support, but for reliable results, a plugin like Responsive Menu gives you independent control over mobile dropdown behavior including tap interactions, swipe gestures, and animations.