Navigation and menus

Signal’s navigation is driven entirely by Shopify menus, which you build in Shopify admin → Content → Menus. The theme then decides, on its own, how much of a panel each menu item deserves.

Step 1 — build the menus in admin

1. Go to Content → Menus.

2. Edit the menu with the handle main-menu — the menu Signal’s header reads by default. Add your top-level items.

3. Add sub-items by dragging a menu item under another one, or using “Add nested menu item”. Signal renders three levels: top level, child, grandchild.

4. Edit the menu with the handle footer for the policy row at the bottom of the footer.

5. Create extra menus for the footer’s link columns — one per column. Give them names you’ll recognize, like “Shop” and “House”.

Tip

A menu’s handle is the part Shopify generates from the name — you can see it in the URL while editing a menu. Signal’s defaults are main-menu and footer because those are the handles Shopify creates on every new store, so a fresh install has working navigation out of the box.

Step 2 — point the header and footer at them

Where	Setting	Default
Header section	Menu	main-menu
Footer section	Policy menu	footer
Footer → Menu block	Menu + Heading	one block per column

Both the header and the footer live in section groups, so you set this once for the whole store. See the Theme editor tour.

How the mega menu decides its shape

This is the part worth understanding, because you control it through your menu structure rather than a setting.

Any top-level item with sub-items opens a panel. Signal builds that panel in one of two shapes:

Wide panel

Full-bleed, across the window, with the child links in columns and room for artwork. Used when the item has four or more children, or any child has its own sub-items, or the item has a promo block with a real image or product attached.

Compact dropdown

A narrow dropdown anchored under the menu item. Used for everything else — two or three plain links.

The reason for the split is practical: a menu of two plain links doesn’t earn a full-bleed panel, and stretching “About us → Our story, Stockists” across a wide screen looks like something failed to load.

Shaping a panel deliberately

• Want a wide panel? Give the item four or more children, add a third level under one of them, or attach a promo with artwork.
• Want a compact dropdown? Keep it to three or fewer plain children and don’t give it a promo image or product.

Note

Grandchild links render in both shapes — the wide panel groups them under their parent as a column heading, and the compact dropdown lists them indented under their parent. But a menu with grandchildren always goes wide, so in practice you’ll see them in columns.

The mega panel promo

Each wide panel can carry one featured block in its side column. Add it to the Header section as a Mega panel promo block.

Setting	Notes
Menu position	Which dropdown this promo belongs to, counted across the menu items that have sub-items. The first such item is 1, the second is 2, and so on
Heading	Short label — the demo uses “Drop 04”
Text	A sentence under it
Image	The artwork. Shown at 4:5
Featured product	If set, the product’s own image, title and price are shown instead of the image, linked to the product
Button label / Button link	An underlined call to action

Caution

Menu position counts only items that have sub-items. If your menu is Shop, Lookbook, About (with children), Contact — and only Shop and About have children — then Shop is position 1 and About is position 2. Lookbook and Contact never open a panel, so they’re not counted.

Two behaviors to know:

• Artwork only appears on wide panels. A 4:5 card inside a 280-pixel dropdown would dwarf the links beside it. The heading, text and button still render in a compact dropdown, so nothing you set is thrown away — it just loses the picture.
• A promo with no image or product doesn’t widen the panel. Only real artwork counts, which is why a heading-only promo leaves a compact dropdown compact.

When there’s no promo

If a panel has no promo block, its side column falls back to the header section’s Mega panel note — one line of copy shown in every panel that lacks a promo. The demo uses it for the brand’s one-sentence premise. Leave it empty and the side column is simply omitted.

The mobile drawer

Below 900 pixels wide the horizontal menu is replaced by a drawer, opened from the burger icon. It mirrors the full menu:

• Top-level items with children become expandable rows.
• Grandchild links are included — the drawer renders all three levels, so nothing that exists on desktop is missing on a phone.
• A parent’s own page stays reachable. Because the parent row is the expander, tapping it opens the list rather than following its link. Signal therefore adds an extra row inside the expanded list that goes to the parent’s own URL.

The parent link label

That extra row’s wording is a setting: Header → Parent link label, default Go to [title]. [title] is replaced with the menu item’s own name, so “About us” becomes “Go to About us”.

Why a setting rather than a hard-coded “View all”? Because a parent menu item leads to a product list about as often as it leads to a page, and “View all” is wrong half the time. Write what fits your store — “Go to [title]”, “Shop all [title]”, “[title] overview”.

Tip

Use [title] in square brackets, not curly braces. Shopify evaluates Liquid inside setting values, so a {{ title }} placeholder is resolved to nothing before the theme ever sees it.

The row is skipped automatically in two cases, so you never get a duplicate:

1. The parent item has no real destination — its link is # or empty, i.e. it’s being used purely as a label.
2. One of its children already points at the same URL.

The rest of the header

The icon row on the right of the header is built from your store’s settings rather than menu items:

Icon	Appears when	Goes to
Burger	Below 900px wide	Opens the mobile drawer
Search	Always	Opens the search overlay
Account	Customer accounts are enabled in Shopify	Your account page
Heart	enable_wishlist is on	Opens the wishlist drawer; links to your wishlist page even without scripting
Bag	Always	Opens the cart drawer, with a live item count

Footer navigation

The footer has three navigation pieces:

• Menu blocks — add one per column. Each has a heading and a menu. The demo ships two: “Shop” pointed at main-menu and “House” pointed at footer.
• Policy menu — a single row of links along the bottom, typically your refund, privacy, terms and shipping policies. Shopify generates policy pages under Settings → Policies; add them to a menu to show them here.
• Stockists link and Contact email — standalone settings in the footer section, not menu items.

Checklist

1. main-menu built, with sub-items where you want panels.

2. Header Menu setting pointed at it.

3. Mega panel promo blocks added, with the right Menu position.

4. Mega panel note written, or deliberately left empty.

5. Parent link label worded to fit your store.

6. footer menu built with your policy pages.

7. Footer Menu blocks added for each column.

8. Every link clicked, on desktop and on a phone, with no 404s.

Next step

Pages and templates — the pages your menus need to point at.