Navigation in Instant spans two related areas: header and footer layouts that wrap your storefront, and navigation elements you insert into those layouts (or any section). This article covers both.
Header and footer layouts
Headers and footers are layout types, not single Insert elements. You create them like sections, but Instant groups them separately in the Layouts & layers panel under Headers and Footers.
Each header or footer is its own layout you design like a section — add logos, links, cart buttons, and dropdown menus, then publish it. After publishing, set one header as your main header and one footer as your main footer in layout settings so they apply across your store.
To create a new header:
Open Layouts & layers and find the Headers group.
Create or select a header layout.
Use Insert to add elements into the header canvas.
Publish the header when you are ready for it to go live.
The same flow applies to Footers. See Layout types overview for how headers and footers fit alongside the other layout types.
Plan availability
You can build headers and footers on any plan. Publishing them requires the Starter plan or higher — on a lower plan you can keep building, but publishing prompts you to upgrade first. Individual navigation elements have no plan restriction; the gate applies to publishing the header or footer layout itself. Check your plan under Settings → Plans, or see Upgrade your plan.
Navigation elements from Insert
For the interactive pieces inside a header or footer, open Insert → Elements → Advanced → Navigation. The presets are:
Dropdown — a menu trigger with a floating panel of links. Use it for "Shop", "About", or any multi-link category.
Cart button — opens the cart drawer when clicked. Useful for most storefront headers.
Country select — lets visitors switch market or country.
Language select — lets visitors switch language.
You can add and design all of these on any plan. For the two localization presets, see Country and language selectors.
Build a typical header
A common header structure looks like this:
Insert a Row or Grid from Insert → Structure to create the header shell.
Add your logo as a Media or Text element on the left.
Insert Dropdown presets for each menu category and add link items inside each dropdown panel.
Add a Cart button on the right.
Optionally add Country select and Language select if you sell internationally.
Use Layouts & layers to reorder items, nest elements, and make the layer tree match your intended desktop and mobile layout.
Dropdown menus in navigation
The Dropdown preset under Navigation is the same element found under Interactive. It opens a floating panel anchored to the trigger; configure its anchor (Bottom for most header menus), alignment, and offset so the panel opens below the trigger without clipping.
Style the trigger as plain text for a minimal look, or as a button for emphasis. Each item in the dropdown panel is a link you point at a destination. See Dropdowns and tooltips for the full set of dropdown controls.
Tips
Design mobile and desktop breakpoints separately — many stores collapse navigation into a compact menu on small screens.
Keep header height consistent across pages by using one published header layout rather than rebuilding navigation per section.
Name your header layout clearly in Layouts & layers (for example, "Main header — summer sale") so your team knows which version is active.
Test the Cart button with products in the cart to confirm the drawer opens correctly.