# 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 %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.airdev.co/canvas/3.8/canvas-library/page-templates/mobile-menu-page.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.