To create a dropdown menu in WordPress, nest one or more child links under a parent item, then save that navigation in the place your visitors use it. The exact screens depend on your active theme: block themes use Appearance > Editor and the Navigation block, while classic or hybrid themes may use Appearance > Menus. Follow the workflow that matches your dashboard, then preview the public header on desktop and a narrow mobile viewport.
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
Choose the correct WordPress menu editor first
Look at the Appearance section in your dashboard before changing anything. If you see Appearance > Editor, your site is using a block theme and its navigation is managed with the Navigation block. The Site Editor’s navigation screen is at Appearance > Editor > Navigation; that screen is available when a block theme is active. WordPress documentation identifies this as the block-theme workflow: Site Editor navigation.
As an Amazon Associate I earn from qualifying purchases.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →If Appearance > Menus is present, you are probably using a classic or hybrid theme, and you can use the traditional menu editor. WordPress 5.9 was the last release to include the Appearance > Menus screen by default for every site. From WordPress 6.0 onward, block themes manage navigation through the Navigation block, while the classic screen can still be available for classic or hybrid themes or when a plugin restores it. The official reference is the Appearance Menus Screen documentation.
| What you see | Where to build the dropdown | How it reaches the public header | Where display behavior is configured |
|---|---|---|---|
| Block theme with Appearance > Editor | Navigation block in Appearance > Editor > Navigation | Assign the menu to a Navigation block in the Header or another visible template part, then save | Navigation block settings, including hover or click, arrows and overlay behavior |
| Classic or hybrid theme with Appearance > Menus | Menu structure in Appearance > Menus | Assign the saved menu to a theme menu location, then preview | Theme-dependent menu and location controls |
A dropdown is not a separate kind of link. It is a hierarchy: a parent item contains child items, and those children are displayed beneath the parent when the menu is opened. If the links are all at the same level, WordPress has no parent-child relationship to display as a submenu.
Create a dropdown in a block theme
Use this procedure when the active theme exposes the Site Editor. Button names can receive small changes in later WordPress releases, but the Navigation block and its nesting model remain the relevant controls.
1. Open the site’s navigation management screen
- In the WordPress dashboard, open Appearance > Editor.
- Open the Navigation area. You can reach it directly at Appearance > Editor > Navigation, or open a template part containing a Navigation block and edit that block.
- Select the existing menu you want to change. If no suitable menu exists, choose the option to create a blank menu.
A Navigation block can display an existing menu or a new one. When it is inserted without an existing menu, WordPress may initially populate it with a Page List block rather than individual links. The Navigation block documentation describes these choices.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
2. Decide whether the Page List should remain automatic
A Page List can be useful when you want published pages to appear automatically, but it gives you less control over exactly which pages become top-level or child links. To customize those entries, use the Page List block’s Edit controls and convert the list to individual page links. After conversion, newly published pages are no longer added to that menu automatically, so the links become a deliberately maintained menu rather than a live list.
Make this decision before nesting items. A manually converted list is usually easier to organize when the dropdown needs a specific order, custom labels or links that do not correspond one-to-one with every published page.
3. Add the parent item and its submenu
- In the Navigation block, select the top-level item that should open the dropdown.
- In the block toolbar, choose Add submenu.
- Inside that submenu, add a page, enter a custom URL, or insert another block or link. Give each child a label that tells visitors what destination it represents.
- If you prefer to build the hierarchy as a separate block, insert a Submenu block as a child of the Navigation block and populate it. The relationship between the two blocks is documented in the Submenu block reference.
The parent item can remain a normal page link while also owning a submenu. If the parent is intended only as a category label, choose a destination and label that make sense for your site’s navigation rather than leaving visitors with an unexplained dead end.
4. Nest links with List View
Open the Navigation block’s List View to see the hierarchy as an outline. Drag a child item directly beneath its intended parent and slightly to the right. That indentation makes it a nested submenu item. Drag it back to the left when you want to return it to the top level. List View is safer than trying to infer the hierarchy from the visual header, especially when several levels are present.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Rank #2
Reorder children in the order visitors should encounter them. Keep siblings at the same indentation level; accidentally dropping one item farther to the right can make it a child of the preceding child rather than a sibling of the parent.
5. Choose how the dropdown opens
With the relevant submenu selected, use the Navigation block settings to choose Hover or Click visibility. Hover can reveal a submenu as a pointer moves over its parent; click requires an explicit activation. Choose the behavior that fits how your visitors use the header, and test it with both a mouse and a touch device because a touch screen does not provide the same hover interaction.
The Navigation block can also show or hide an arrow beside parent items. An arrow gives a visual cue that more links exist, while omitting it leaves a cleaner header. Apply the choice consistently to parent items so the header does not communicate different meanings with identical-looking controls.
6. Configure the mobile overlay
Open the Navigation block’s overlay controls to decide how the menu behaves at smaller widths. You can collapse navigation to an icon on mobile, or configure it to collapse at all sizes. Preview the expanded and collapsed states: a dropdown that works in the desktop header can be hidden if the mobile overlay is not enabled or if the Navigation block is not the one used by the mobile layout.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems7. Place the edited menu in the visible template part
Saving a menu in Site Editor navigation does not automatically put it in the header visitors see. Open the template part intended for the menu, commonly the Header, and add or select a Navigation block there. Assign the menu you edited, save the template part and the site, then use Preview to inspect the public page.
If the Navigation block is present but appears empty, verify that the intended menu was assigned and that the latest changes were saved at both the navigation and template-part levels. The official Site Editor guidance also recommends checking the site’s cache when an updated menu is not appearing: Site Editor navigation troubleshooting.
Rank #3
Create a dropdown with a classic or hybrid theme
Use this route when Appearance > Menus is available. The exact menu-location names and styling depend on the active theme, so do not assume that every classic theme has the same header, footer or mobile locations.
1. Open or create the menu
- Go to Appearance > Menus.
- Select an existing menu from the menu selector, or choose the option to create a new menu.
- Add the pages that should appear in the navigation. You can also add custom links when the destination is not a WordPress page, entering the URL and the link text.
The menu editor may show panels for pages, custom links and other content types. Add only the links that belong in this particular navigation; a dropdown is easier to scan when each child serves a distinct purpose.
Free tools Windows power users keep installed
One-click scans. No signup required.
2. Build the parent-child hierarchy
- In the menu structure, locate the item that should own the dropdown.
- Drag each child link beneath that parent.
- Indent the child to the right until WordPress displays it as a nested item.
- Repeat for every child, keeping all siblings aligned at the same indentation.
The classic editor supports multiple levels through drag-and-drop hierarchy. A child that is merely below the parent but not indented remains a top-level item and will not be rendered as that parent’s submenu. You can use the same method to create a second-level child beneath an existing submenu item when the theme supports deeper levels.
3. Assign the menu to a theme location
Find the theme-location controls in the menu screen. Select the location used by the header or primary navigation, then save the menu. Location labels vary by theme, so choose the one that corresponds to the public area where the dropdown should appear rather than assuming that “Primary” has the same meaning everywhere.
4. Preview the public page
Open the site’s front end in a new tab or use the Customizer preview when your theme provides it. Confirm that the assigned menu is the one visible in the header, open the parent item, and test every child link. If a theme has separate desktop and mobile navigation locations, inspect both; changing one assigned location does not necessarily change the other.
Move an existing classic menu into a block theme
You do not have to rebuild a well-organized classic menu from scratch when switching to a block theme. In a Navigation block, choose the existing classic menu as the menu to use. WordPress copies that menu’s data into a block-based representation; the original classic menu is not modified. This conversion behavior is described in Make WordPress Core’s Navigation block overview.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchAfter importing, inspect the resulting List View. Confirm that parent and child indentation survived, remove obsolete links, and then assign the converted menu to the Header template part. The imported copy and the original classic menu are separate representations, so later edits to one should not be assumed to update the other automatically.
Make the dropdown usable on desktop and mobile
Check the hierarchy, not just the appearance
- Every dropdown child is visibly nested beneath the intended parent in List View or the classic menu structure.
- Sibling links share the same indentation and appear in the intended order.
- Parent labels indicate the category or section represented by their children.
- Each child opens the correct page or URL when selected.
Test both opening methods
If the block menu is set to Hover, move the pointer into the parent and then across the submenu without leaving the menu area. If it is set to Click, activate the parent and confirm that the submenu stays available long enough to choose a child. Repeat the test on a touch device or with a browser’s mobile emulation, where hover is not available in the same way.
Inspect the responsive overlay
Resize the browser to a narrow viewport and activate the menu icon if the Navigation block collapses. Confirm that the parent item can be opened inside the overlay and that the child links are not clipped, hidden behind another element or pushed beyond the viewport. If the theme uses a separate mobile template part, verify that it contains the Navigation block assigned to the edited menu.
Preview the real URL after saving
Editor previews can show a saved draft while a cached public page still shows an older menu. Save the navigation, save the template part or menu location, open the public URL and refresh it. If the old version persists, check the site’s cache after verifying that the correct menu is assigned.
Troubleshoot common dropdown-menu problems
“Appearance > Menus” is missing
This is usually a theme workflow difference rather than a broken dashboard. Check whether Appearance > Editor is available. With a block theme, open Appearance > Editor > Navigation and use the Navigation block instead of searching for the classic screen. A classic or hybrid theme may still expose Appearance > Menus, and a plugin can restore that screen on some installations.
The submenu was created but is not visible on the site
In a block theme, creating a menu in the Navigation management screen is only one part of the process. Open the Header or other intended template part, select its Navigation block, assign the edited menu and save. In a classic theme, return to Appearance > Menus and confirm that the menu is assigned to the location used by the public header. Then preview the actual page and check the cache if the saved assignment is not reflected.
Links appear in one long row instead of a dropdown
Inspect the hierarchy. In the block editor, use List View and move each child beneath the parent with a slight right indentation. In the classic editor, drag the item beneath its parent and indent it to the right. Position alone is not enough; the child relationship must be represented by indentation.
The menu starts with every page and will not stay curated
The Navigation block may be using a Page List. Use its Edit controls to convert the Page List into individual page links, then arrange and nest those links manually. Remember that converted links no longer receive newly published pages automatically, so add future pages yourself when they belong in the menu.
Recommended Free Tools
The parent opens but the children cannot be selected on a phone
Review the Navigation block’s visibility and overlay settings. A Hover-only interaction is not suitable for a touch-only test, so try Click behavior and confirm that the mobile overlay is configured to open. Also check that the parent and child links are inside the same Navigation block used by the mobile header.
The imported classic menu looks different after conversion
Conversion copies the classic menu data into a block representation but does not edit the original. Open List View, correct any indentation or ordering differences, and save the converted menu where the Header Navigation block can use it. Treat the imported block menu as the version displayed by the block theme.
Block and classic workflows at a glance
| Decision point | Block-theme route | Classic or hybrid route |
|---|---|---|
| Dashboard entry point | Appearance > Editor > Navigation | Appearance > Menus |
| How a child becomes a dropdown item | Choose Add submenu, add links, or use a Submenu block; nest in List View | Drag the link beneath its parent and indent it to the right |
| Where the menu is connected to the header | Assign it to a Navigation block in the Header or another template part | Assign it to a theme-provided menu location |
| Opening and mobile controls | Navigation block settings provide Hover or Click, arrows and overlay collapse options | Presentation and responsive behavior depend on the active theme |
| What happens when importing a classic menu | WordPress copies the data into a block-based representation and leaves the original classic menu unchanged | The menu remains in the classic editor until you choose a block-theme workflow |
Final verification checklist
- Identify whether the active theme uses the Site Editor or the classic menu screen.
- Create or select the intended menu and add the parent and child links.
- Confirm the child links are indented beneath the correct parent.
- Choose Hover or Click in a block menu and configure the arrow and overlay behavior you want.
- Assign the menu to the Header Navigation block or the appropriate classic theme location.
- Save every relevant screen, including the template part when using a block theme.
- Open the public page, test the dropdown with a pointer and a touch-sized viewport, and check each destination.
- Check the cache if the public page still shows an older menu after the correct assignment is saved.
The key distinction is simple: a dropdown is created by nesting links, but it becomes visible only when the resulting menu is connected to the header system your theme actually uses. Follow the editor-specific path, verify the hierarchy in the editor, and test the saved menu in the public desktop and mobile layouts.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
