Menus in Shopify Admin

Before diving into code, you need to understand how menus work in Shopify. Merchants create and manage navigation through the admin, and your theme reads that data to render the navigation UI.

Where Menus Live

In the Shopify admin, menus are found under:

Online Store → Navigation

This is where merchants create, edit, and organize their site navigation. As a theme developer, you’ll access this data through Liquid, but understanding the admin interface helps you build themes that work well with how merchants manage their menus.

Default Menus

Every new Shopify store comes with two default menus:

1. Main menu (handle: main-menu)

   • Typically used for primary header navigation
   • Usually includes: Home, Catalog/Shop, About, Contact

2. Footer menu (handle: footer)

   • Used for footer navigation links
   • Often includes: Search, About Us, Policies, Contact

You can reference these by their handles in your theme code.

Creating a New Menu

To create a menu in the admin:

1. Go to Online Store → Navigation
2. Click Add menu
3. Enter a Title (e.g., “Secondary Navigation”)
4. The Handle is auto-generated from the title
5. Add menu items
6. Click Save

Menu Handles

The handle is the identifier you’ll use in Liquid:

Handles are lowercase, with spaces replaced by hyphens.

Adding Menu Items

Each menu contains links (menu items). Click Add menu item to add:

Link Types

Pages Link to any page in the store:

• Home
• Custom pages (About, Contact, FAQ)
• Policy pages (Privacy, Terms, Shipping)

Collections Link to product collections:

• All collections
• Specific collections (Men’s, Women’s, Sale)

Products Link directly to specific products.

Blogs and Articles Link to blog pages or individual blog posts.

Policies Link to store policies:

• Refund Policy
• Privacy Policy
• Terms of Service
• Shipping Policy

Custom URLs Link to any URL:

• External sites
• Anchors on the same page
• Email links (mailto:)
• Phone links (tel:)

Nested Menus (Dropdowns)

Shopify supports up to three levels of nesting. This creates dropdown or flyout menus.

Creating Nested Items

1. Add a parent menu item (e.g., “Shop”)
2. Drag other items underneath and indent them
3. The indented items become children

Example structure:

Main Menu
├── Home
├── Shop                    ← Parent
│   ├── Men's              ← Child (level 2)
│   ├── Women's            ← Child (level 2)
│   └── Accessories        ← Child (level 2)
│       ├── Bags           ← Grandchild (level 3)
│       └── Jewelry        ← Grandchild (level 3)
├── About
└── Contact

Parent Link Behavior

When a menu item has children, you have two options:

1. Clickable parent: Link the parent to a page (e.g., “Shop” links to /collections/all)
2. Non-clickable parent: Set the parent link to # so it only opens the dropdown

Many themes support both patterns. Consider accessibility when deciding.

Best Practices for Merchants

When building themes, document these guidelines for merchants:

Keep Menus Shallow

• Limit nesting to 2 levels when possible
• Deep nesting is hard to navigate on mobile

Use Descriptive Names

• “Shop All” is clearer than “Products”
• “Contact Us” is better than “Contact”

Limit Top-Level Items

• 5-7 items maximum for main navigation
• Too many items overwhelm users

Test on Mobile

• Nested menus need accordion or drawer patterns
• Ensure tap targets are large enough

Menu Organization Example

Here’s a well-organized menu structure for a clothing store:

Main Menu:

├── New Arrivals
├── Women
│   ├── Tops
│   ├── Bottoms
│   ├── Dresses
│   └── View All Women's
├── Men
│   ├── Tops
│   ├── Bottoms
│   └── View All Men's
├── Sale
└── About
    ├── Our Story
    ├── Sustainability
    └── Contact

Footer Menu:

├── Customer Service
│   ├── Shipping & Returns
│   ├── FAQ
│   └── Contact Us
├── Company
│   ├── About Us
│   ├── Careers
│   └── Press
└── Legal
    ├── Privacy Policy
    ├── Terms of Service
    └── Refund Policy

Special Menu Handles

Some themes expect specific menu handles. Document these in your theme:

If merchants create menus with these handles, your theme automatically uses them.

Practice Exercise

Plan a menu structure for a bookstore theme:

1. What would your main menu include?
2. How would you organize categories (Fiction, Non-Fiction, etc.)?
3. What footer links would you include?

Example Solution:

Main Menu (main-menu):

├── Books
│   ├── Fiction
│   ├── Non-Fiction
│   ├── Children's
│   ├── Best Sellers
│   └── New Releases
├── Authors
├── Events
├── Gift Cards
└── About Us

Footer Menu (footer):

├── Shop
│   ├── Browse All
│   ├── Gift Cards
│   └── Sale
├── Help
│   ├── FAQ
│   ├── Shipping
│   ├── Returns
│   └── Contact
└── About
    ├── Our Story
    ├── Locations
    └── Careers

Key Takeaways

1. Menus live in Online Store → Navigation in the admin
2. Handles identify menus in Liquid (main-menu, footer)
3. Nest items by dragging and indenting for dropdowns
4. Three levels maximum of nesting is supported
5. Document expected handles in your theme
6. Guide merchants on menu organization best practices

What’s Next?

Now that you understand how menus are created in the admin, the next lesson covers Navigation Liquid Objects and Linklists and how to access this menu data in your theme code.