Zeppelin StudioOpaline
  1. Docs
  2. Guides

Guide

Navigation & mega menu

Choose how your main menu opens, and build a mega menu from your menu’s sub-levels.

The mega menu: a glass panel under the header, laid out from the categories nested in your menu.

The header shows the menu chosen in its Menu setting — your Main menu by default. Menu type decides how it opens on desktop:

Menu typeWhat it does
DropdownA short list of links under the menu item.
Mega menuA glass panel under the header, laid out from your menu’s sub-levels.
Burger (drawer)The whole menu slides in from the side, on desktop as on mobile.

Build a mega menu#

  1. In the Shopify admin, go to Content > Menus and open Main menu.
  2. Add a top-level item — for example Shop — and link it to a collection.
  3. Nest items under it by dragging them slightly to the right. Each one becomes a category of the panel; link it to its collection.
  4. If a category needs its own links, nest a third level under it.
  5. Save the menu, then in the theme editor set the header’s Menu type to Mega menu.

How the panel arranges your categories#

You don’t choose a layout: the panel adapts to what your menu contains.

Your menuWhat visitors see
Up to 6 categoriesCards with a picture — the collection image, or its first product’s image when the collection has none.
7 categories or moreA compact list with thumbnails, in columns across the full width.
Categories with linksColumns of links, spread evenly across the panel.

The panel also shows the menu item’s name and a View all link. Its pictures load the first time it opens, so they add nothing to the page load.

Long menus#

When the menu no longer fits beside the logo, it moves to its own row under the logo. If it wouldn’t fit there either, the header switches to the menu button, as on mobile.

Good to know

The mega menu works with the keyboard: Tab moves through the categories and links, and Esc closes the panel.

The transparent header#

On the home page, Transparent header on the home page lays the header over the opening image. With Frosted glass effect (liquid glass), it turns into frosted glass once visitors scroll past the Scroll threshold. All header settings are listed on the Header page.