# 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](https://docs.airdev.co/canvas/general-information/functionality/hidden-variables-popup).
* `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`](https://docs.airdev.co/canvas/assets/reuseables/header) 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
{% hint style="warning" %}
Make sure you are using the latest Canvas Starter Template and that you have installed the [Feather Icon Plugin](https://bubble.is/plugin/feather-icons-1553889862898x186125300131692540) to your app.
{% endhint %}
* Resize `Group page860Group` and add other modules inside of it
{% hint style="info" %}
If you add more modules, please resize `Group PLACEHOLDER` so that it is not overlapping with any other elements (for responsiveness)/
{% endhint %}
* 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`then `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..
