Create Drop-Down Menus

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.

In this guide

1. Create a Drop-Down Menu
2. Add a Menu Item Without a Link

Create a Drop-Down Menu

Follow the steps below 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.

Select the appropriate tab for your design interface:

Site EditorWP-AdminCustomizer

In the Site Editor, your menu comes from the Navigation block. Follow these steps to create a drop-down menu:

1. From your dashboard, go to Appearance → Editor.
2. Select the Template or Template Part you want to edit, or click the preview of your site to open the Site Editor.
3. Open List View at the top-left corner of your screen (it’s the icon that looks like three horizontal lines above each other.)
4. Select the Navigation block (it may be nested inside other blocks like Header, Group, or Row.)
5. 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.
6. Click Add submenu link.
7. Select the first page you’d like to appear in the drop-down.
8. Repeat until you have added all the menu items.
9. Click Save to save your changes.

Slow down or speed up the video using the controls in the lower right corner after clicking Play

Alternatively, you can create a drop-down menu using the toolbar of the Navigation block:

1. Click on the menu item you wish to make into a dropdown.
2. 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.)
3. Click the Add submenu button in the toolbar to transform that menu item into a dropdown menu.
4. Click the + icon or the Add link option that appears to add new links to your new dropdown menu.
5. Click Save to save your changes.

Slow down or speed up the video using the controls in the lower right corner after clicking Play

On sites with classic themes, you can add drop-down menus using WP-Admin using the following steps:

1. Visit your dashboard.
2. Go to Appearance → Menus.
3. Ensure the correct menu is selected at the top of the screen.
4. Click and drag a menu item to the right to “nest” them under the item just above it.
5. Click the “Save Menu” button to save your changes.

You can undo this by dragging them to the left again. Click the “Save Menu” button when you’re done.

On sites with classic themes, you can create drop-down menus using the Customizer by following these steps:

1. Add all the menu items you wish to have in your site’s menu.
2. Click on the “Reorder” link that appears below your menu items.
3. Click the > right arrow to nest a page underneath the one above, creating a drop-down item.
4. Once you’re happy with your drop-down menu, click the “Done” button.
5. Click the “Save Changes” button to publish your changes to the site.

Video Tutorial

Add a Menu Item Without a Link

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 to create an “unclickable” menu item.

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.

Select the appropriate tab for your design interface:

Site EditorWP-AdminCustomizer

In the Site Editor, your menu comes from the Navigation block. Follow these steps to create an unclickable menu item:

1. From your dashboard, go to Appearance → Editor.
2. Select the Template or Template Part you want to edit, or click the preview of your site to open the Site Editor.
3. Open List View at the top-left corner of your screen (it’s the icon that looks like three horizontal lines above each other.)
4. Locate the Navigation block (it may be nested inside other blocks like Header, Group, or Row.)
5. Click on the menu item you wish to turn into an unclickable link, or add a new menu item.
6. 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.)
7. Edit the link by clicking the pencil icon.
8. In the URL box, place only the # symbol, like in the image to the right.
9. Press Enter/Return on your keyboard to submit the change.

The GIF below demonstrates the process:

To create a menu item without a link, add a # symbol in the URL field.

On sites with classic themes, you can add an unclickable link to your menu using WP-Admin by following these steps:

1. Go to Appearance → Menus.
2. Choose your menu.
3. Click the “Custom Links” section under the “Add menu items” header.
4. In the URL field enter the # symbol, as shown in the image on the right.
5. In the Link Text field enter the text you want to appear in your menu, as shown in the image on the right.
6. Click the “Add to Menu” button.
7. Click the “Save Menu” button.

On sites with classic themes, you can add an unclickable link to your menu using the Customizer by following these steps:

1. Go to Appearance → Customize → Menus.
2. Choose your menu.
3. Click the “Add Items” button.
4. Click the Custom Links option.
5. In the URL field enter the # symbol, as shown in the image on the right.
6. In the Link Text field enter the text you want to appear in your menu, as shown in the image on the right.
7. Click the “Add to Menu” button.
8. Click the “Save Changes” button.