A dropdown menu helps visitors find related pages without putting every link in your website’s main navigation.
For example, you might have a Services menu item with links to Web Design, Hosting and Support beneath it. Visitors can open the submenu to find the service they need.
You can create this type of menu in WordPress without writing code or installing a plugin. The steps depend on your theme: newer block themes use the Site Editor and Navigation block, while classic themes typically use the Menus screen.
This guide covers both approaches, how to edit your menu afterwards and what to check before making it available to visitors.
What is a WordPress dropdown menu?
A dropdown menu is a group of navigation links organised beneath another menu item.
The main item is called the parent item. The links beneath it are submenu items, sometimes called child items.
For example, a menu could be arranged like this:
- Services
- Web Design
- WordPress Support
- Website Hosting
Instead of showing all four links across the header, the website displays Services in the main navigation and makes the other links available through its submenu.
A dropdown can make sense when several pages belong to a clear group. It is not essential for every website. If your navigation contains only a few important pages, direct links may be easier for visitors to use.
The way a submenu opens and looks depends on your theme and navigation settings.
Find the right menu editor for your WordPress theme
Before you begin, sign in to your WordPress dashboard and check the options under Appearance.
If you see Appearance → Editor, you are likely using a block theme with access to the Site Editor. You can usually manage your website’s navigation under Appearance → Editor → Navigation.
If you see Appearance → Menus, your theme provides the classic menu-management screen.
Some themes support a mixture of features or supply their own navigation controls, so your dashboard may not match either route exactly. Check your theme’s documentation if that happens.
The two methods below achieve the same basic result, but their controls are different. Follow the instructions for the editor available on your website.
How to create a dropdown menu with a block theme
Block themes use the Navigation block to display and edit menus. You can manage your menu in the Site Editor and use the block to control how it appears in your website’s header or another template part.
Step 1: Open your navigation menu
In your WordPress dashboard, go to Appearance → Editor → Navigation.
Select the menu you want to edit. If your website uses more than one menu, make sure you choose the one that appears in the area you want to change, such as the header.
You can create a menu if you do not already have a suitable one.
If you need more detailed editing controls, select the menu in the editing area or use its Edit control to open the Navigation block’s editing view.
Step 2: Choose the parent menu item
Find the item that will contain your dropdown, such as Services.
If it does not exist yet, add it to the Navigation block. You can search for an existing page or add a custom link.
Check the link you choose. A menu label can be clear and descriptive, but it still needs to lead visitors to the intended destination if it is clickable.
Step 3: Add the first submenu link
Select the parent item in the Navigation block.
Use Add submenu in its toolbar, or open the item’s options in the block settings and choose Add submenu link.
WordPress will add a submenu item beneath the parent. Search for the page you want to link to or enter the appropriate URL.
For example, you could add WordPress Support beneath Services.
Step 4: Add and arrange the remaining links
Add the other pages you want in the same submenu.
Use the menu’s list view to check the hierarchy. The child items should appear nested beneath their parent.
You can reorder items by dragging them in the list view or using the available moving controls. You can also move an item into an existing submenu.
Put the links in an order that makes sense to visitors. If you have several related services, you might group them by how customers look for them rather than by the order in which you created the pages.
Step 5: Check how the submenu opens
Select the Navigation block and open its settings.
Under its display settings, look for Open on click and Show arrow.
- Open on click changes the submenu interaction from the default hover behaviour to click-based opening.
- Show arrow controls whether a parent item displays an arrow indicating that it contains a submenu.
The Navigation block also has responsive display options that determine when a mobile-style menu button appears.
Use the settings that work with your navigation design, then test the result on the actual website. Pay particular attention if the parent item is also a link: visitors need to be able to understand how to open its submenu and, where intended, reach the parent page.
Step 6: Save and make sure the menu is displayed
Save your navigation changes.
If you created a new menu but cannot see it on the website, it may not yet be assigned to the Navigation block that displays your header.
Open the relevant template part, such as the Header, and check that it contains a Navigation block using the correct menu. Save any template changes as well.
Then open your website in a new tab and test the dropdown.
If you would like a broader introduction to block themes and their editing tools, see our guide to full-site editing in WordPress.
How to create a dropdown menu with a classic theme
If your theme provides Appearance → Menus, you can create a submenu by arranging menu items into a hierarchy.
Step 1: Open or create a menu
Go to Appearance → Menus in your WordPress dashboard.
Choose the menu you want to edit. If you do not have one, select the option to create a new menu and give it a recognisable name, such as Main Menu.
The name helps you manage menus in WordPress. It is not necessarily shown to website visitors.
Step 2: Add your pages or links
Use the available panels to select the pages, posts, categories or custom links you want to include.
Click Add to Menu to place them in the menu structure.
For example, add Services, Web Design, WordPress Support and Website Hosting.
The panels available here can vary according to your website and settings. You do not need to enable every option under Screen Options just to create a dropdown.
Step 3: Nest the submenu items
Find Services in the menu structure.
Drag Web Design below Services and slightly to the right. WordPress should show that it is now a sub item.
Repeat this for WordPress Support and Website Hosting, placing both beneath Services at the same level of indentation.
The resulting structure should have one parent item and three child items.
If dragging is difficult, expand a menu item and check its available Move controls. Depending on the position of the item, these can include an option to move it beneath another item as a child.
Step 4: Choose a display location
Look for the menu’s display-location settings.
Your theme may offer locations such as Primary, Header or Footer. Choose the location where you want this menu to appear.
Not every theme offers the same locations, and a theme may have its own way of displaying navigation. If the location you need is missing, consult your theme’s documentation rather than choosing a location at random.
Step 5: Save and test the dropdown
Click Save Menu.
Visit your website and find the parent item. Check that its submenu contains the right links and opens as expected.
WordPress lets you create a parent-and-child menu structure, but your theme determines how that structure is displayed. A theme that does not support the dropdown behaviour you want may need different settings or theme-specific assistance.
How to edit, reorder or remove submenu items
Your menu will probably change as you add pages or reorganise your website. You can update its links without rebuilding the entire navigation.
With a block theme, return to Appearance → Editor → Navigation. Choose your menu, then select the item you want to change. Use the Navigation block’s editing controls to change its label or URL, move it within the hierarchy or remove it from the menu. Save your changes.
With a classic theme, go to Appearance → Menus and choose the relevant menu. Expand an item to edit its Navigation Label or remove it, or drag items to rearrange their position and indentation. Click Save Menu when you are finished.
Removing a menu item is different from deleting the page it links to. If you remove Web Design from your navigation, the Web Design page can still exist and be reached through other links or its direct URL.
Before removing a parent item, check what should happen to its child links. You may need to move them elsewhere so visitors can still find those pages.
Why is my WordPress dropdown menu not working?
If your submenu is missing or behaves unexpectedly, check the basics before installing anything.
The menu does not appear on the website
With a block theme, check that the correct navigation menu is selected in the Navigation block used by your header or other template part. Creating a menu alone does not guarantee that it is displayed.
With a classic theme, check the selected display location and any navigation settings supplied by your theme.
Also confirm that you saved your changes.
The submenu items appear in the wrong place
Return to your menu editor and inspect the hierarchy.
In a block theme, the submenu items should be nested inside the intended parent’s submenu. In a classic theme, they should be indented beneath the parent item.
An item at the same level as Services may appear as another top-level link rather than inside the Services dropdown.
The menu looks unchanged after saving
Check whether the update was saved in the menu and, where relevant, in the header template part.
If the changes are saved in WordPress but the public website still shows an older version, check your website’s caching arrangements and browser cache.
Only clear caches you have access to and understand. If the website uses a hosting or security service with its own cache, follow that provider’s instructions.
The dropdown opens on desktop but not on mobile
Test the actual mobile navigation instead of assuming it works like the desktop menu.
Block-theme users can review the Navigation block’s responsive display and submenu settings, including Open on click. Classic-theme users should check their theme’s mobile-menu options.
If a parent item navigates to a page when you expect it to open a submenu, check how the theme or Navigation block separates those actions. A visible submenu arrow may help visitors understand where to tap.
The links lead to the wrong pages
Open each submenu link and confirm its destination.
If a label says Website Hosting but the link opens a different service, correct the URL in the menu editor. Also check custom links for typing mistakes and links to pages that are no longer published.
How to make your dropdown menu easy to use
A technically working menu is not necessarily a helpful one. Its structure and behaviour should make it easier for visitors to find what they need.
Use clear labels. Choose words that accurately describe the destination. Broad labels such as Services can work well as parent items when their submenu makes the available services clear.
Group related pages. Put items together because they belong together, not simply because you want fewer links across the header.
Avoid unnecessary levels. A submenu inside another submenu can be useful in some cases, but each additional level makes navigation more complex. Use the shallowest structure that works for your content.
Keep important destinations easy to find. Do not hide a page several levels deep when visitors are likely to look for it directly.
Test different ways of navigating. Use a mouse, touchscreen and keyboard. Check that you can identify which item has a submenu, open it, reach its links and move away without getting stuck. Keyboard behaviour can vary between themes, so test the actual result rather than assuming it works.
Check the mobile layout. A menu that fits across a desktop header may become an expandable panel on a phone. Make sure labels remain readable, links are easy to tap and submenu items are not cut off.
There is no universal maximum of seven top-level links or fixed submenu depth that works for every website. Start with the needs of your visitors and simplify the structure where you can.
Do you need a plugin to create a WordPress dropdown menu?
No. WordPress provides built-in ways to create parent-and-child navigation items with both block themes and classic themes.
A plugin may be worth investigating if you need more specialised navigation, such as a large mega menu with multiple columns or additional types of content.
Before installing one, check whether your theme or existing navigation tools already support the feature you need. If they do not, review a plugin’s compatibility with your theme, recent maintenance, support and effect on the mobile experience.
Adding a plugin solely to create a basic Services dropdown introduces another component to maintain without necessarily solving a problem.
Final checklist: test your dropdown before finishing
Once you have saved the menu, open the public website and check the following:
- The menu appears in the intended location.
- Each parent item contains the correct submenu links.
- Labels are clear and every link opens the right destination.
- The dropdown opens and closes as expected with a mouse, touchscreen and keyboard.
- The menu remains usable on a narrow screen.
- The latest changes appear on the public website, not just in the editor.
A good WordPress dropdown menu does not need to be complicated. Start with a clear group of pages, build the hierarchy using the editor your theme supports, and test how real visitors will use it.
