How do I create navigation menus and add them to my header and footer?

What menus are for

A menu is a list of links you build once and then show in your header or footer. The same menu can be used in several places, in every market.

Opening the Menus page

Open Menus with this link, or get there from the builder: select the header's Menu block (or a footer Menu block), click Select menu, then Create menu or Edit. The Menus page lists your menus, newest first. Staff members need the Themes permission to create or edit menus.

Creating a menu

1. Click Create new menu.
2. Enter a Menu name, such as "Main menu" or "Footer links". Only you see it.
3. Add your links under Menu items (see below).
4. Click Save.

A menu needs at least one item with a label and a link. Otherwise you see "Please enter the first label".

Adding menu items

Type in the empty Label field to create an item. It then gets a Link field, and a new empty label field appears so you can keep adding.

• Label: the text shoppers see.
• Link: a full web address (for example https://example.com) or a path on your store (for example /collections/shoes).

The Link field has quick pickers so you do not need to type paths: Home page, Search page, and searchable lists of Collections and Products. Pages offers the contact page, the cart page, and your policies (privacy, terms, refund, shipping, cookie).

Levels and limits

• Label (top level): up to 5 items.
• Sub label (second level): up to 10 under each top item.
• Specific label (third level): up to 10 under each sub label.

When a level is full, its field is disabled with a "limit reached" message. How the levels look to shoppers (mega menu, dropdown, or drawer) is chosen in the builder.

Reordering and removing

Drag an item by its handle to reorder it within its level. Click the red trash button to delete an item and everything under it.

Editing or deleting a menu

Click a menu in the list, change it, and click Save (it stays disabled until something changes). To delete, tick the menus and click Delete menus. If a header or footer still uses a deleted menu, it shows no links until you pick another one.

Adding a menu to the header

1. Open the builder, select the Header, then its Menu block.
2. Click Select menu, search if needed, and pick a menu. You then get Replace, Edit (opens the menu in a new tab), and Remove.
3. Set the Appearance options, which appear once a menu is chosen:
   • Type: Mega (large panels with columns), Dropdown (simple lists), or Drawer (a panel that slides in).
   • Position (left, center, right) and Row (top, next to the logo, or bottom, on its own row).
   • Color scheme for the dropdown or mega panel.
4. Under Mobile layout, turn on Navigation bar to show the menu as a bar under the header on phones and tablets, with its own color scheme. Without it, phones get the menu in a drawer.
5. Publish the page, then use Apply to all pages on the header if other pages should match.

With Type set to Drawer, Position, Row, and Mobile layout are hidden because a drawer always opens from the side.

Adding a menu to the footer

1. Select the Footer in the builder.
2. If there is no Menu block, add one with Add new block.
3. Click Select menu and pick a menu. The footer shows its links as a list.
4. Publish the page.

Good to know

• Editing a menu's items updates it everywhere it is used. You do not need to pick it again.
• Which menu a header or footer uses is saved per page and per market, so different markets can use different menus.
• Keep main navigation in the header and legal or help links in the footer.