Skip to main content

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.

R
Written by Reactiv App
Updated over a week ago

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

  1. Log in to your Shopify admin dashboard
    ​     Visit shopify.com/login and sign in to your store.
    ​

  2. In the left-hand sidebar, scroll to the Sales Channels section.
    ​

  3. Click Reactiv – Mobile App Builder.
    ​

  4. In the Reactiv dashboard, select App Studio.
    ​

  5. In the dropdown menu next to your store logo, choose Navigation.
    ​

  6. 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.
      ​

📝 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:

  1. Click Save (top-right).
    ​

  2. 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?