The menu started with five links. Then each service got its own page, then a few locations, and now the top of the site runs onto two lines with items like “Boiler Repair” squeezed next to “Contact”. What you want is one word, Services, with the individual pages tucked underneath it until someone points at it.
That is a dropdown, and WordPress calls the tucked-away items a submenu. To add a dropdown menu in WordPress you do not need a plugin. You nest some menu items under another one, and the theme takes care of the dropping down. This post assumes you already have a working menu; if not, start with building your first menu and come back. Like most jobs in our guide to managing your WordPress site, it gets much easier once you know which screen your theme uses.
Decide what the top item will do
Before nesting anything, settle one question: when someone clicks “Services” itself, where should they go? You have two options.
- A real page. A Services overview page with a line about each service and a link to its page. This is usually the better choice. Visitors who click the heading land somewhere useful, the page can rank in search on its own, and phone users, who cannot hover, have a sensible place to arrive.
- A label that goes nowhere. Some owners make the top item a custom link with nothing but a hash sign (#) as its address, so it only opens the submenu. It works, but on some themes a tap on a phone simply jumps to the top of the page and nothing else happens. If you go this way, test it on a phone. Our post on custom links in a WordPress menu explains how those links are made.
Adding a dropdown menu in WordPress from the Menus screen
For classic themes, the work happens in Appearance → Menus.
- If the site has more than one menu, open the right one first: pick it in the drop-down list near the top of the screen and press Select.
- Make sure the parent item (Services) and all the child pages are already in the menu. Add any missing ones from the Pages box on the left.
- Drag each child item so it sits directly below the parent, then drag it a little to the right. When it indents and shows the words “sub item” next to its type, it has become part of the submenu.
- Repeat for each child. They should all be indented by the same amount, one under another.
- Click Save Menu and check the site.
Dragging sideways by a few pixels is fiddly, especially on a laptop trackpad. There is a calmer way. Click the arrow on a child item to open its settings and look for the Move links at the bottom. Options such as Under Services or Out from under Services do the indenting for you, as do Move up one and Move down one for ordering. Recent versions also add Menu Parent and Menu Order drop-downs to each item’s settings, which is the least fiddly method of all: choose Services as the parent, save, and the item is nested.
The Customizer’s menu panel (Appearance → Customize → Menus) has its own reorder mode with arrow buttons, which some people find easier than dragging. Either route edits the same menu.
Submenus in the Navigation block
In a block theme the same nesting is done on the header’s Navigation block, which you reach through the Site Editor. If you cannot remember whether yours is a block theme, our overview of headers, footers and menus has a quick way to check.
- Go to Appearance → Editor, open the header and select the Navigation block, or choose Navigation in the Site Editor’s side menu to edit a menu directly.
- Click the link that should become the parent, such as Services.
- In that link’s toolbar, choose Add submenu. The link turns into a submenu item with an empty area beneath it.
- Add the child links inside it, searching for each page by name.
- Use List View to check the structure. Children show indented beneath their parent, and you can drag them in or out there.
- Save the header and the menu when the Site Editor asks.
Hover, click or always open
Select the Navigation block itself, not a link inside it, and its settings include a Submenus section. In recent versions it offers a Submenu Visibility choice of Hover, Click or Always, and a Show arrow toggle. Older versions show an “Open on click” switch instead.
The difference matters. With Hover, the parent stays a normal link, and the arrow next to it opens the submenu for people who click or use a keyboard. With Click, the parent becomes a button that only opens the submenu, so clicking “Services” no longer takes anyone to your Services page. If you built a proper overview page, Hover with the arrow showing keeps both behaviours. WordPress itself warns in the block settings if you choose options that make submenus hard to reach by keyboard.
What happens on a phone
Hover does not exist on a touchscreen, so every theme has to handle submenus differently on small screens. Broadly, you will see one of two patterns.
- Everything expanded. In most block themes, the Navigation block’s mobile overlay lists submenu items already open beneath their parent. Simple, but a menu with three dropdowns of six items each becomes a long scroll.
- Toggles. Many classic themes show a small arrow next to each parent in the mobile menu. Tap the arrow to open the children; tap the label to go to the parent page.
Test both the label and the arrow on a real phone, not only in a narrowed desktop browser. The questions are simple: can you reach every child page, and does tapping the parent do what you expect? The collapsed menu itself, the hamburger button and when it appears, is a separate topic covered in our guide to the WordPress mobile menu.
How deep should a submenu go?
One level is right for nearly every small-business site. Services, with the services underneath. Locations, with the towns underneath. That is it.
WordPress lets you nest further, a submenu inside a submenu, and some themes display that as a second flyout. These are awkward on a laptop, because moving the pointer diagonally closes the menu, and on a phone they turn into a maze. Many themes also cap the depth they will show, so items nested too deep may simply not appear.
If you find yourself wanting a third level, that usually means the overview page should be doing more work. Put the detailed links on the Services page itself, grouped under headings, and keep the menu shallow.
A rough check: if a single dropdown has more items than you could read aloud in one breath, it is too long. Split it, or move some items to the footer.
When the dropdown does not drop
- The items are not actually nested. Reopen the menu. If the children are not indented, they are top-level items and will show in the main bar.
- The theme location does not support submenus. Some themes show only top-level items in certain spots, such as a footer or top-bar menu. Check the theme’s documentation.
- A script or style problem. If the submenu shows briefly and vanishes, or opens only on the second tap, an optimisation plugin that delays JavaScript or removes “unused” CSS is a frequent cause.
Those and other faults are covered in more depth in our troubleshooting post on a menu that will not show.
Frequently asked questions
Can a dropdown include links to other websites?
Yes. Any menu item can be a child, including custom links to another site, a booking system or a PDF. Nest it exactly as you would a page. For links that leave your site, consider whether they belong in the main navigation at all, since they take visitors away from your pages.
How do I take a page out of a dropdown without deleting it?
Remove the menu item, not the page. In the Menus screen, open the item and click Remove, or select the link in the Navigation block and delete it, then save. The page itself stays published at the same address. If it still needs to be easy to find, link to it from the overview page instead.
Can I show a short description under each dropdown item?
Some themes can. In the classic Menus screen, turn on Description under Screen Options and a description box appears in each item’s settings, but it only shows if the theme prints it. Block themes and many builders have their own options for this, so check what yours offers.
Why does my dropdown open behind the page content?
This is usually a styling clash. A slider, a sticky element or a section with its own layering sits above the submenu. It is fixed with a small CSS change to the stacking order, ideally made in a child theme or the Additional CSS box, and it is worth testing on every template afterwards.
Most dropdowns take ten minutes once you know where the Move links are. If yours refuses to open, flickers, or broke after an update, that is the kind of single, specific fault our WordPress bug fixing service is set up for.
Next in this series: How to Edit the Footer in WordPress
