# Drop-down navigation

Shopify allows you to nest menus and menu items in the Online Store Navigation Editor. A drop-down menu can be created easily by nesting menu items under one main top-level menu. 

![Drop-downs are ideal for easy to find items](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-ypDGHTUCdvuMYY2-%2F-MW-zREqW0Nd0HMh50XI%2FKapture%202021-03-17%20at%2009.20.58.gif?alt=media\&token=26bb234b-72b3-42a4-bde1-2bbc33131011)

## Setup example

To create a drop-down style menu in your navigation, you'll only need two levels; the main top-level menu and then menu-items below.

![](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-zgr5Z9xUy7txh95u%2F-MW0-LIr6dbrRbc7bFFT%2Ffile-kAmV9F6n3n.jpg-2.png?alt=media\&token=5f56d94e-cff8-4e59-873c-0927d20359df)

![](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-zgr5Z9xUy7txh95u%2F-MW0-QCtMNF4vugumaXu%2Ffile-vFx0MbzSpD.jpg.png?alt=media\&token=498b4c4c-8371-40ed-ad41-fcfc20a833bd)

Begin using the Navigation editor for the Online Store in your Shopify Admin:

![](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-rzdAHWZ7DAHwubKx%2F-MW-uDCEVt2Wsavd8Pbm%2FScreen%20Shot%202021-03-17%20at%208.50.50%20AM.png?alt=media\&token=0cbf523f-bd49-4592-82a3-1f105103a997)

In this example, we will convert Vineyard into a drop-down menu and move Contact Us, Our Family, Our History and Our Vineyard as children of Vineyard:

![](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-zgr5Z9xUy7txh95u%2F-MW01z6bIKtlq66A_RTT%2FScreen%20Shot%202021-03-17%20at%209.29.21%20AM.png?alt=media\&token=3834f557-7851-46fc-984f-eae7fa65013e)

> Tip: If you have another nested menu like "Wines", open or expand them to simplify the drag-and-drop process.

Use drag-and-drop to move menu items under the parent, Vineyard:

![](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-zgr5Z9xUy7txh95u%2F-MW044ZsI5wAaiHKTdMd%2FKapture%202021-03-17%20at%2009.45.23.gif?alt=media\&token=5b233991-e916-4347-852e-99c3215e374d)

If you have at least one nested menu item, creating additional menu items are simple, use the "Add menu to Vineyard" option as shown in the above example. 

Example of Vineyard with child menu items including the extra "Additional Menu" manually created at the end:

![](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-zgr5Z9xUy7txh95u%2F-MW04mJC85Wnjs0NmTei%2FScreen%20Shot%202021-03-17%20at%209.36.09%20AM.png?alt=media\&token=bd13b87d-0616-439a-bba0-c08c8fd635d4)

{% hint style="success" %}
To learn more about how nesting is done in the Online Store Navigation Editor, follow Shopify's support articles: \
\
<https://help.shopify.com/en/manual/online-store/legacy/menus-and-links>
{% endhint %}