> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas-pages-and-modules/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas-pages-and-modules/2.0.0/pages/2-column-menu-tabs-page.md).

# 2-Column Menu Tabs Page

## Overview

Responsive layout for a two-column page with multiple tabs. This page is ideal for an account or settings page. 

## Structure

* When this page is added to your app, it will come with four main groups:
  * **Group Main**\
    This group contains the responsive settings for all blocks. 
  * **Group Tabs main**\
    This group contains all the tabs content groups.
  * **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.
  * **Group Side Portal Content**\
    This group contains all the menu navigation tabs. There are ten placeholder tabs that you can hide or show.
* 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.
    * **var - tab url parameter** - This group stores the tab name of which tab the current user is viewing
    * **var - show sidebar?** - This group includes conditional statements on whether or not to show/hide Group Side Portal. The sidebar will be hidden when the current page width is less than or equal to 824.
    * **var - show tabs content groups?** - This group includes conditional statements on whether or not to show/hide **Group Tabs main**. The tabs content group will be hidden when the *current page width is less than or equal to 824*.
* This block will come with one reusable element:
  * [**header**](https://docs.airdev.co/canvas/canvas-functionality/reference/reusable-elements/header)

## How to set up

* Show or hide any navigational menu tabs (e.g., **Group Nav Tab 2 -**) in the sidebar. To show a menu tab, check the box for *This element is visible on page load*.
  * Within **Group Side Portal Content**, you will find various groups called **Group Nav Tab 1**, **Group Nav Tab 2**, **Group Nav Tab 3**, and etc. To customize these tabs, simply update the text data source in these groups to the names of your tabs. 

![Show or hide the menu tabs](/files/-MBho-zL6qh5nQQozVsk)

![Enter tab name as data source](/files/-MBhpvglvtaPubHTO63U)

* If you add more blocks to **Blocks container 860 (do not rename)**, you will need to resize **Group Main PLACEHOLDER** so that it is not overlapping with any other elements (for responsiveness).
* In the new blocks, you will need to replicate the header responsive settings and workflows from **Group Nav 1 Tab - Profile**:

1\) Copy **Group responsive** over and paste it to the block header

![](/files/-MBhpHo1bZJQAMS_EtzT)

2\) Copy conditional statements and workflow from **Text profile** to your block title

![Copy conditional statements over](/files/-MBhwcTaFtuvdvfJUNk6)

![Copy workflows over](/files/-MBhy3vcXgZ_Zqpk0Zh1)

Doing the above will ensure that users can click on the block title on mobile to go back to the sidebar menu.

![Mobile view](/files/-MBhyG_D-6bwRgnjrdQg)

![Mobile sidebar menu](/files/-MBhyM2HlnM11qAvpgfj)

## **Showing or hiding a block**

* For each block in **Blocks container 860 (do not rename)**, uncheck the box for *This element is visible on page load* and check the box for *Collapse this element's height when hidden*

![](/files/-LchN-ZVHwxc-C3MZ7Ds)

* For each block, go to the Conditional tab and add a conditional statement for when to show the block:\
  \&#xNAN;*var - tab url parameter's text is Group Nav 7/8/9/10 or 11's tab's text then This group is visible*

![](/files/-LchNSDOdGVQtq3b5_Cr)