Theme v1.0.0Shopify Dawn 15.4.1
Navigation & Menus
Menus are store data, not theme data. You build them in the Shopify admin under Content → Menus, and the theme chooses which menu to show where. Because of this, menus are not included in the theme file and must be created on each store.
Where menus are used
| Location | Setting | Default |
|---|---|---|
| Header | Header section → Menu | main-menu |
| Footer | Footer → Menu block → Menu | Chosen per block |
| Custom footer | Custom footer → Menu column block → Menu | Chosen per block |
How menu depth is displayed
How you nest items under Content → Menus decides how the desktop header displays them. Set the style with Menu type in the header section: Dropdown, Mega menu or Drawer.
| Structure in the admin | Desktop result |
|---|---|
| Top-level items only | Flat links across the header. |
| Items with children | A dropdown under each top-level item. |
| Children with their own children | Nested lists — shown as columns when Menu type is Mega menu. |
Menus in the custom header
With Theme settings → Header → Enable Custom Header switched on, the same menu is displayed differently:
- Image grid. Second-level items that link to a product or collection are shown as image tiles, using that product’s or collection’s image.
- Sidebar lists. Second-level items with six or more links under them are shown as a text list beside the grid.
- Mobile cards. On mobile, top-level items with children appear as image cards, taking the image from the linked collection or product.
Link to collections to get images
Custom mobile menu blocks
With Theme settings → Header → Enable Custom Mobile Menu switched on, the mobile menu is built from blocks in the header section instead of from your menu. This lets mobile navigation use images, icons and a different order from desktop.
| Block | Purpose | Links to |
|---|---|---|
| Mobile: Menu + Image | Top-level item with an image; can open a submenu. | Sets a Menu ID |
| Mobile: Icon + Menu | Top-level link with an icon. | — |
| Mobile: Text Header | Text heading that groups child items. | Sets a Menu ID |
| Mobile: Text Child Item | Link shown under a Text Header. | Parent Menu ID |
| Mobile: Submenu Item | Image link inside a submenu. | Parent Menu ID |
| Mobile: Sub Text Header | Heading inside a submenu. | Parent Menu ID, sets a Submenu Group ID |
| Mobile: Submenu Text Link | Text link under a Sub Text Header. | Submenu Group ID |
Blocks are connected by matching text IDs. Give a parent block a Menu ID such as shop, then enter shop as the Parent Menu ID of every item that belongs under it. Sub Text Headers work the same way one level down, using Submenu Group ID.
Mismatched IDs fail silently
Next
Was this page helpful?
Tell us whether this page answered your question.