Setting up Hamburger Menu Navigation
In this guide, you’ll learn how to enable and customize the hamburger-style menu navigation in Reactiv’s Clip Studio.
This menu gives your customers quick access to important sections of your app—like collections, product pages, and external links—via a clean, collapsible menu icon.
Open the Navigation Editor
Log in to your Shopify admin dashboard
Visit shopify.com/login and sign in to your store.
In the left-hand sidebar, scroll to the Sales Channels section.
Click Reactiv – Mobile App Builder.
In the Reactiv dashboard, select App Studio.
In the dropdown menu next to your store logo, choose Navigation.
Toggle the Menu switch on to activate the hamburger menu in your app.
Log in to your Shopify admin dashboard
Visit shopify.com/login and sign in to your store.
In the left-hand sidebar, scroll to the Sales Channels section.
Click Reactiv – Mobile App Builder.
In the Reactiv dashboard, select App Studio.
In the dropdown menu next to your store logo, choose Navigation.
Toggle the Menu switch on to activate the hamburger menu in your app.
Add Items to Your Menu
Once the menu is enabled, you’ll see the Build your navigation section where you can begin adding menu items. Click Add Menu Item to choose from the following options:
Product
Opens a search modal where you can select a specific product from your store catalog.
-
Add a title (e.g., "Mug – 11oz")
-
Click Select product, then choose an item from the list.
-
Collection
Links to a collection in your store.
-
Add a title (e.g., "Sweatshirts")
-
Click Select collection and choose from the available options.
-
Link
Use this to add an external URL (e.g., blog, FAQs, contact page).
-
Add a title and paste the full link
-
Group
Create a collapsible menu section that can contain other menu items.
-
Enter a group title (e.g., "Shop by Category")
-
Click Add Node to add products, collections, links, or even more groups within it.
-
Product
Opens a search modal where you can select a specific product from your store catalog.
Add a title (e.g., "Mug – 11oz")
Add a title (e.g., "Mug – 11oz")
Click Select product, then choose an item from the list.
Click Select product, then choose an item from the list.
Collection
Links to a collection in your store.
Add a title (e.g., "Sweatshirts")
Add a title (e.g., "Sweatshirts")
Click Select collection and choose from the available options.
Click Select collection and choose from the available options.
Link
Use this to add an external URL (e.g., blog, FAQs, contact page).
Add a title and paste the full link
Add a title and paste the full link
Group
Create a collapsible menu section that can contain other menu items.
Enter a group title (e.g., "Shop by Category")
Enter a group title (e.g., "Shop by Category")
Click Add Node to add products, collections, links, or even more groups within it.
Click Add Node to add products, collections, links, or even more groups within it.
📝 You can delete any item by clicking the trash icon next to it.
📌 To rearrange items, grab the icon on the far left of the item and drag it up or down to change the order.
Preview Your Menu
As you build your menu, use the Menu Preview pane on the right side of the screen to see how it will look in your mobile app.
This live preview updates as you enter titles and add links—so you can quickly check the flow and structure before publishing.
Save and Publish
When you’re happy with your menu layout:
Click Save (top-right).
Then click Publish to make the menu live in your mobile app.
Click Save (top-right).
Then click Publish to make the menu live in your mobile app.
✅ Your app now has an easy-to-use hamburger menu to guide customers wherever they need to go!
Did this answer your question?😞😐😃