# 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:
* **Blocks container 860 (do not rename)**\
This group contains the responsive settings for all blocks on the page. Any new blocks should be added to this group.
* This page comes with one popup:
* **Popup Hidden Variables** contains two groups:
* **var - Website object**\
This group stores the website object (e.g., app name, primary color, and etc.)
* **var - dummy data**\
A placeholder group in case you want to use any hidden variable groups later.
* This page will also come with two reusable elements: [**header**](https://docs.airdev.co/canvas/canvas-functionality/reference/reusable-elements/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="info" %}
If you add more blocks to the page, please resize **Group PLACEHOLDER** so that it is not overlapping with any other elements (for responsiveness).
{% endhint %}
* \[Optional] Update page title and description content.
* Add blocks to the page using our Canvas chrome extension. These new blocks should be add into **Blocks container 860 (do not rename).**
* By default, the blocks should be hidden on page load (uncheck the box for *This element is visible on page load for each block*)
* Check the box for Collapse this element's height when hidden
\
* To show or hide blocks, add conditional statements to each block:
* For the first block, add a conditional statement like this:
* *When **bottommenu's** Tab is empty or **bottommenu's** Tab is 1then This element is visible*
* For blocks after the first block, add the following conditional statements:
* *When **bottommenu's** Tab is 2 then This element is visible*
* *When **bottommenu's** Tab is 3 then This element is visible*
* and so on...
{% hint style="warning" %}
To ensure the FloatingGroup Bottom menu shows up at the bottom of your page, you need to align the bottom of the floating group to the bottom of the page.
{% endhint %}
