This guide covers the fundamentals of building custom and mobile-responsive navigation for your Shopify store. Learn how to create headers and footers, add navigation elements like dropdowns, and customize them to fit your store's needs.
Overview
Navigation elements in Instant allow you to build fully customized headers and footers that integrate seamlessly with your Shopify store.
What You Can Build
Navigation Type | Common Elements |
Header | Logo, menu links, dropdowns, cart, language/country selectors |
Footer | Links, social icons, newsletter signup, legal pages |
Mega Menu | Full-width dropdown with multiple columns, images, and content |
Accessing Navigation Layouts
Go to the Layouts panel in Instant
Locate the Navigations layout type
Choose to create either a Header or Footer
The process for creating both is the same.
Navigation Elements
In the Insert panel, you'll find a group of elements specifically for building navigation:
Element | Description |
Basic Navigation Bar | Pre-built navigation structure |
Dropdown Element | Expandable menu with trigger and content |
Card Button | Styled button for navigation actions |
Country Select | Country and currency selector |
Language Select | Language switcher |
Cart Button | Cart icon with item counter |
Getting Started with a Template (Optional)
For a quicker start, use a pre-made navigation template:
Open the Template Library
Navigate to the Templates section
Browse navigation templates for headers and footers
Select a template (e.g., Mega Menu for Nutrition and Food)
The Layouts panel will show your new header layout
Template Customization
Once inserted, you can fully customize the template:
Change text and links
Reorder elements
Upload your logo
Adjust calls-to-action (CTAs)
Modify dropdown content (including adding videos or other elements)
Building a Navigation Header from Scratch
Step 1: Create the Base Structure
Start with a base row containing three columns:
Column | Purpose |
Left | Logo placement |
Center | Dropdowns and navigation links |
Right | Ecommerce elements (cart, language select) |
Step 2: Add a Dropdown
Navigate to Insert panel → Navigation
Drag the Dropdown Element into your layout
The dropdown comes with default hover effects and is functional immediately
Step 3: Understand Dropdown Structure
The dropdown consists of two parts:
Part | Description |
Trigger | The text and icon that activates the dropdown |
Dropdown | The container holding the expanded content |
Step 4: Configure Dropdown Interactions
In the Interactions panel, set how the dropdown opens:
Trigger Type | Behavior |
Hover | Opens when user hovers over the trigger |
Click | Opens when user clicks the trigger |
Step 5: Style the Dropdown
Under Dropdown settings, customize:
Setting | Description |
Anchor | Where the dropdown opens (below, above, left, or right of trigger) |
Align | Alignment relative to trigger (left, center, right) |
Offset | Space between trigger and dropdown |
Width | Dropdown width relative to parent layer (e.g., 100%) |
Creating a Mega Menu (Optional)
Transform a standard dropdown into a full-width mega menu:
Drag the dropdown outside its current column
Place it into the base row (allows full-width spanning)
Add content such as text, images, or videos
Adjust the dropdown container's layout settings to change direction (horizontal or vertical)
Adding Multiple Dropdowns
Duplicate and Organize
Duplicate the dropdown container to create multiple dropdowns
Rename layers in the Layers panel for organization (e.g., "Dropdown Men", "Dropdown Women")
Set Interactions
Assign actions to each dropdown trigger to ensure the correct dropdown opens when activated.
Linking Navigation Elements
Make your navigation functional by adding links:
Adding Links
Select a text element or column
Open the Interactions panel
Add a Go to Link action
Paste the destination URL
Choose whether to open in a new tab or same tab
Logo Link
Don't forget to add a Go to Link action to your logo linking back to your homepage.
Cart Button & Counter
The Cart Button displays the cart icon and item count.
Setup
Drag the Cart Button onto your canvas
Customize the icon and count display styling
Interactions
By default, the cart button redirects to the cart page. Customize this behavior in the Interactions tab.
Country Select
Allow users to choose their country and currency.
Setup
Drag the Country Select element into your navigation
Customize country names and currency symbols
Available Options
The countries and currencies available are based on the markets you've configured in Shopify.
Language Select
Allow users to switch languages.
Setup
Drag the Language Select element into your navigation
Languages available are based on your Shopify language settings
Final Steps
Preview your navigation to ensure everything works as expected
Test all dropdowns, links, and interactive elements
Publish your changes to your Shopify store
Quick Reference
Task | Action |
Create navigation layout | Layouts panel → Navigations → Header or Footer |
Use template | Template Library → Navigation templates |
Add dropdown | Insert panel → Navigation → Dropdown Element |
Configure trigger | Select dropdown → Interactions → Hover or Click |
Style dropdown | Select dropdown → Dropdown settings |
Create mega menu | Move dropdown to base row |
Add link | Select element → Interactions → Go to Link |
Add cart button | Insert panel → Navigation → Cart Button |
Add country select | Insert panel → Navigation → Country Select |
Add language select | Insert panel → Navigation → Language Select |
Dropdown Settings Summary
Setting | Options |
Anchor | Below, Above, Left, Right |
Align | Left, Center, Right |
Offset | Pixel value |
Width | Percentage or fixed |
Trigger | Hover, Click |