Mobile Menu Page

Overview

Standard one column page layout where multiple modules can be stacked on top of each other (they should not be overlapping). This page includes a bottom navigation menu that is optimized for use on mobile. The menu displays four destinations and each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon. Please ensure that you have installed the Feather Icon plugin to your app before submitting your page request.

Structure

• When this page is added to your app, it will come with one main group:

  • Group page860Group - This group contains the responsive settings for all modules. All modules should be placed into this group.

• This page will come with a Popup Hidden Variables. For more information on how to use the Popup Hidden Variables, click here.

  • var - Website object - This group stores the website object (e.g., app name, primary color, and etc.)

  • var - dummy - This is a placeholder group. You can store any data here by updating the type of content and data source of the group.

• This page will also come with two reusable elements: header A and bottommenu.

  • The bottommenu reusable element comes with four tabs

  • Clicking on a tab will trigger a custom workflow called Set tab number

    • The custom workflow will set a number state on bottommenu (this captures which tab the user is currently viewing)

  • The reusable element also includes a Popup Hidden Variables

    • var - toggle tabs stores bottommenu's number state

How to set up

Make sure you are using the latest Canvas Starter Template and that you have installed the Feather Icon Plugin to your app.

• Resize Group page860Group and add other modules inside of it

If you add more modules, please resize Group PLACEHOLDER so that it is not overlapping with any other elements (for responsiveness)/

• Update Title Text (please note that Group Title will be hidden when the page width is less than or equal to 500px)

• By default, the modules should be hidden on page load (uncheck the box for This element is visible on page load for each module)

  • Check the box for Collapse this element's height when hidden

  

• To show or hide modules, add conditional statements to each module:

  • For the first module, add the conditional statement

    • bottommenu's Tab is empty or bottommenu's Tab is 1then This element is visible

  • For modules after the first module, add the following conditional statement:

    • bottommenu's Tab is 2 then This element is visible

    • bottommenu's Tab is 3 then This element is visible

    • and so on..