Creating A Dropdown Menu In Your Navigation

You will remember in the last chapter, we mentioned that many themes now include the possibility of dropdown menus in the navigation. To put in place a dropdown menu:

The dropdown menu will be attached to a specific link in the main navigation. The first step is to decide which one and to note down the exact name of the link. In the screenshot, the dropdown menu is attached to the link named "Catalog".

The next step is to create a link list for the links that are to be included in the dropdown menu. In the navigation section, click on the Add link list button on the left-hand side.


For the name of the new link list, type in the exact name of the link we noted in the first step. It must be the exact same as the link name to ensure that the dropdown will connect with the link in the main navigation. I typed in "Catalog" as I want to attach the dropdown to the "Catalog" link.


Now that the link list is created, the next step is to add the links that you want to appear in the navigation dropdown. I added links to three product collections: "Animals", "Flowers" and "Trees (Automatic)". I created the first two while you weren't looking.

Lastly, let's verify that all has worked as planned. Click on View your website in the upper navigation. On your storefront, check if the dropdown menu appears when you put the mouse over the link in the main navigation. If it's not there, try reloading the page and check again. If it is there, verify that each of the links are working correctly.


There are only really two things that can go wrong here. The first is if the theme you have chosen does not support dropdown menus in the navigation. The second is that you mistyped the name of the link list.

If you know that your theme supports dropdowns and it's still not appearing, you need to verify the handle for the link list you just created. The handle should be the same as the name of the link to which you are attaching the dropdown, except it will be in small letters with dashes instead of spaces. In my example the handle for

"Catalog" is "catalog". If you were attaching the dropdown menu to "About Us" then the handle would be "about-us".

If in doubt, copy and paste into the handle field, the name of the link to which you want to attach the dropdown and click the Save button. Reload your storefront to verify that it is now working correctly.