Story theme
Story v1
Story v1
  • Story theme documentation
  • Explore Story
  • Pages
    • Page navigation
    • How to use page templates
      • Story page templates when using a different theme
    • Contact page
    • Lookbook
    • Team
    • Timeline
  • Blogs
    • Blogs
    • Articles
  • Homepage Sections
    • Blog posts
    • Collection list
    • Featured collection
    • Image with text
    • Image with text overlay
    • Logo list
    • Slideshow
    • Featured product
    • Newsletter
    • Map
    • Page
    • Rich text
    • Team
    • Testimonials
    • Text columns with images
    • Timeline
    • Video
  • Collections
    • Collection filtering
    • Product stickers
    • Collection sorting
    • Badges
  • Header
    • Transparent header
    • Promotional announcement bar
    • Mega-menu navigation
    • Drop-down navigation
  • Products
    • Product tabs
    • Product long template
      • Product long template when using a different theme
    • Product image sizes
  • Settings
    • Tile decoration
    • Enable container
  • Updates
    • Story Releases
    • Check your theme version
    • How to download latest version
    • Migrating your settings
  • Tips
    • Where to make CSS changes
    • How to add a line break in your headings
  • Advanced
    • Story tutorials
    • Remove Shopify link in footer
  • Contact
    • Share preview link
Powered by GitBook
On this page
  1. Header

Drop-down navigation

Create a single-column drop-down menu in your navigation

PreviousMega-menu navigationNextProduct tabs

Last updated 4 years ago

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.

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.

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

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:

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:

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:

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
Drop-downs are ideal for easy to find items