March Documentation

Module: Menu/Tabs

Using the same flexibility-first approach, we the Tabs module to be as flexible as possible.

Instead of a "static" tabs module, we built the tab triggers separately and let you decide which content to be displayed under each tab.
This means you can assign any prebuilt module in the theme into the tabs, for example:

Screen Recording 2020-12-02 at 10.44.46 PM.gif?source=viewer&v=fca66ac79ed7e761bff081db0ca11a3b

Here are the steps:

  1. Find the Menu module in the modules list, and drag-and-drop it into the page. 
    Image 2020-12-02 at 10.21.35 PM.jpg?source=viewer&v=fe4ad66a6a4f4b01017f60c6d3bfa832
  2. Open the Content group inside the Menu module.
    Image 2020-12-02 at 10.23.25 PM.jpg?source=viewer&v=0a7652b5e780ac7dbb2995affa27c470
    1. Menu Style: Choose between Box, Border, Card, or Card with Broder
    2. Menu Type: Choose to display the module as a normal Menu or function as Tabs.
    3. Menu Option: Choose between Simple Menu or Advanced Menu
    4. Simply Menu or Advanced Menu
    5. Menu Color
  3. Click Edit menu content. Next is to prepare a unique target for each tab. 
    In the URL field, you can specify a unique target with the format: #target
    Here is an example:
    Image 2020-12-02 at 10.33.55 PM.jpg?source=viewer&v=b771a57fa42dda4d53309cac83084399
  4. Once added, it's now time to place the modules that we'll assign to each tab. 
    Drag-and-drop any module(s) into the same section as the Menu module, here is an example:

    Image 2020-12-02 at 10.54.36 PM.jpg?source=viewer&v=e603dd7a18ddafcebb10a2c336f36a14

  5. In each module, assign the unique target (set in step 3) as a class into the Custom Classes field

    Image 2020-12-02 at 11.10.48 PM.jpg?source=viewer&v=9c2dc43d0d66e111f166e520064fd085

    Note: no need to specify the hashtag (#). 

  6. Save and done.