Story theme
Story v2
Story v2
  • Story theme documentation
  • online store 2.0
    • The new experience
  • Header
    • Header styles
    • Toolbar
    • Navigation images
    • Image menus
    • Transparent header
    • Mega-menu navigation
    • Drop-down navigation
  • Sections
    • How to use sections
      • Adding a section
      • Hiding a section
      • Reordering sections
    • Section blocks
    • Complete list of sections and blocks in Story
  • Collections
    • Product badges
      • Sale badge
      • Savings badge
      • Sold-out badge
      • Custom badges
      • Badge settings
    • Collection filtering
      • Custom filter options
    • Collection sorting
    • Collection navigation
    • Feature image
  • Products
    • Upsell promotions
      • How to setup
      • Static upsell promotion
      • Custom upsell promotion
    • Product tabs
      • Static product tabs
      • Unique product tabs
    • Color swatches
    • Inventory countdown
    • Pre-order products
    • Size Charts
      • Static size chart
      • Unique size charts
      • Creating pages
    • Product image sizes
  • Cart
    • Cart styles
    • Shipping message
    • Estimate shipping calculator
    • Cart settings
  • Pages
    • Page navigation
    • How to use page templates
      • Story page templates when using a different theme
    • Contact page
    • Lookbook
    • Team
    • Timeline
  • Blogs
    • Blogs
    • Articles
  • Settings
    • Tile decoration
    • Enable container
  • Updates
    • Story Releases
    • Check your theme version
    • How to download latest version
  • 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
  • Earlier versions
    • Story v1
Powered by GitBook
On this page
  1. Header

Drop-down navigation

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

PreviousMega-menu navigationNextHow to use sections

Last updated 3 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