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 thePopup 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
andbottommenu
.The
bottommenu
reusable element comes with four tabsClicking 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 1
thenThis element is visible
For modules after the first module, add the following conditional statement:
bottommenu's Tab is 2
thenThis element is visible
bottommenu's Tab is 3
thenThis element is visible
and so on..
Last updated