A dropdown menu, or sub-menu, shows additional items when you hover or click on an item in your menu. They can be useful for keeping your menu clean and organized. This guide will show you how to create a drop-down menu.
📌
To determine which section of this guide to follow, visit your dashboard and check under Appearance on the left side. If you see Editor, use the Site Editor section of this guide. Otherwise, use the WP Admin or Customizer instructions.
In this guide
In the Site Editor, your menu comes from the Navigation block. Follow these steps to create a drop-down menu:
- From your dashboard, go to Appearance → Editor.
- Click on the right side of the screen to open up the editing area.
- Alternatively, select Patterns and choose the header or other template part containing your menu.
- Open List View at the top-left corner of your screen (it’s the icon that looks like three horizontal lines above each other.)
- Select the Navigation block (it may be nested inside other blocks like Header, Group, or Row.)
- In the sidebar settings on the right, hover over a menu item and click on the three dots that appears.
- If you do not see the sidebar on the right, you may need to click on the Settings icon in the top right corner to bring up the settings. This icon looks like a square with two uneven columns.
- Click Add submenu link.
- Select the first page you’d like to appear in the drop-down.
- Repeat until you have added all the menu items.
- Click Save to save your changes.
Alternatively, you can create a drop-down menu using the toolbar of the Navigation block:
- Click on the menu item you wish to make into a dropdown.
- A toolbar will appear above the menu item, where you will find the Add submenu button (the icon looks like a curved arrow with three horizontal lines next to it.)
- Click the Add submenu button in the toolbar to transform that menu item into a dropdown menu.
- Click the + icon or the
Add linkoption that appears to add new links to your new dropdown menu. - Click Save to save your changes.
You can create an “unclickable” menu item which is useful when creating dropdown menus. The trick is to use a # symbol as the menu item’s link. The item can still be clicked, but will not navigate to a new page. Here are the steps in detail:
- From your dashboard, go to Appearance → Editor.
- Select the template containing the menu you want to edit.
- Open List View at the top-left corner of your screen (it’s the icon that looks like three horizontal lines above each other.)
- Locate the Navigation block (it may be nested inside other blocks like Header, Group, or Row.)
- Click on the menu item you wish to turn into an unclickable link, or add a new menu item.
- A toolbar will appear above the menu item, where you will find the Link button (the icon looks like a literal link from a chain.)
- Edit the link by clicking the pencil icon.
- In the URL box, place only the # symbol, like in the image to the right.
- Press Enter/Return on your keyboard to submit the change.
The GIF below demonstrates the process:
On sites with classic themes, you can add drop-down menus using WP Admin by dragging individual items to the right to “nest” them under the item directly above it, as shown here:
You can undo this by dragging them to the left again. Click Save Menu when you’re done.
On sites with classic themes, you can create drop-down menus using the Customizer by following these steps:
- Add all the menu items you wish to have in your site’s menu.
- Click on Reorder that appears below your menu items.
- Click the > right arrow to nest a page underneath the one above, creating a drop-down item.
- Once you’re happy with your drop-down menu, click Done.
- Click Save Changes to publish your changes to the site.
Video Transcript
Menus help your visitors navigate your WordPress.com website and can even make it easier to find your site when searching from across the web. If you’re building a new site, creating a menu will be part of your site setup checklist. And if you’re editing an existing site, there are several places to start working on menus.
In My Home, click on Edit Menus. Or under Design, click on Customize.
In the Customizer, click the Menus tab. These themes have a primary or default menu you can start with. Or you can create a menu. The name you give it won’t be visible on the menu itself.
Next, choose locations for your menu. The locations and what they are called may vary by your theme. You can also add a menu in multiple locations.
Now you can build your menu.
You can also add items to choose the pages and posts that you want visible on your menu.
You can also add a menu item that is a link to another website.
Or you can choose categories or tags, creating a link from the menu to a page that features all posts with a specific tag or category.
You can even create a new page from the menu Customizer and build the page later.
You may not want to include every page on your menu, and you can easily remove items by clicking the X. But if you want every page added to your site to also be added to a menu, check this box under Menu Options.
Don’t forget to save your menu as you go.
To rearrange your menu, click on Reorder and use the arrows to move items around, or simply drag them until they’re in the order you want.
Think of how your menu will appear in a full-screen view on a desktop or laptop, and on a mobile screen, where menus usually appear as a dropdown.
You can also create dropdowns within your navigation by nesting one menu item under another.
Many themes also offer a Social Links menu. This is a menu that uses icons as links to your own social channels. You can customize social links here or under Marketing in your dashboard.
For more, please visit WordPress.com/support. Thank you for watching.
You can create an “unclickable” menu item which is useful when creating dropdown menus. The trick is to use a # symbol as the menu item’s link. The item can still be clicked, but will not navigate to a new page. Follow these steps:
- Go to Appearance → Customize → Menus.
- Choose your menu.
- Click Add Items.
- Click the Custom Links option.
- In the URL field enter the # symbol, as shown in the image on the right.
- In the Link Text field enter the text you want to appear in your menu, as shown in the image on the right.
- Click Add to Menu.
- Click Save Changes.
