Mega menu

A mega menu is a wide dropdown that appears on hover for a top-level navigation link. Dost supports three styles: Editorial, Dropdown wide, and Dropdown (default).

How it's wired

1. Online Store → Navigation → Main menu — add the top-level link (e.g. Shop).
2. Customize → Header → Add block → Mega menu.
3. Set the block's Nav handle to match the link title (case-insensitive — Shop matches shop).
4. Pick the style — Editorial.
5. Add column blocks: each column has a heading and a list of links sourced from a sub-menu of the same name.

Styles

Editorial

Wide multi-column dropdown with optional image tile in the rightmost column. Best for catalog brands with rich category imagery.

Settings inside the block:

• Columns (1–4)
• Each column references a sub-menu link group
• Optional image tile (image + caption + link)

Dropdown wide

Full-page-width dropdown. When dropdown_style: full-width is selected globally, the mega menu supports tier 2 and tier 3 menu items: it renders an auto-fit grid of columns — one column per tier-2 item — and lists each item's tier-3 children underneath. So a single Shopify menu structure (top-level → sub-menu → grand-children) becomes a wide multi-column dropdown automatically; you don't need to add column blocks individually.

Dropdown

Standard narrow dropdown matching the link's width. The fallback when no mega-menu block matches the nav handle.

Dropdown style — global toggle

Theme settings → Header → Dropdown style:

• content-width — narrow, matches the link's width
• full-width — every dropdown spans the page width

If full-width is selected globally, all top-level dropdowns (whether mega-menu blocks or not) become wide.

Mobile rendering

Mega-menu blocks aren't rendered on mobile — instead, the mobile drawer shows the underlying Shopify menu structure as nested accordions. So always make sure the Online Store → Navigation menu has correct sub-menu items, even if you rely on Editorial blocks for desktop.

Per-block color scheme

Each mega-menu block has its own Color scheme picker. Use it to give a single mega panel a different palette from the header (e.g., a dark menu on a light header). The scheme applies to the dropdown surface itself — background, text, links, button styling — without affecting the header bar or sibling dropdowns.

Backdrop

When any mega-menu opens, a translucent backdrop covers the page so the dropdown reads cleanly. Backdrop opacity is fixed at 35% and not configurable in v1.