> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-7-documentation/header-group/header-mobile-multi-tab.md).

# Header mobile multi-tab

**The Header Mobile Multi-Tab** feature provides an organized navigation experience for mobile users. It allows multiple tabs within the mobile header, enabling quick switching between menus, categories, or custom content areas.

<figure><img src="/files/Koqn3ukpxXGuJ0jToTnI" alt=""><figcaption></figcaption></figure>

#### **How to add the Header Mobile Multi-Tab?**

* From your Shopify admin, go to **Online Store ->** **Themes**.
* Find the theme that you want to edit, and then click **Customize**.
* In the **Header Group ->** **Add section ->** choose **Header Mobile Multi-Tab.**

<figure><img src="/files/NNk3MYEOwVUJWtgG2qLT" alt=""><figcaption></figcaption></figure>

#### **Conditional Rendering**

The entire section only renders when `settings.enable_multi_tab_layout_mobile` is enabled in theme settings, ensuring it appears only when the multi-tab mobile layout is activated.

<figure><img src="/files/vBK1zHp51FHGeAL0zFPr" alt=""><figcaption></figcaption></figure>

#### Block Types Supported

* `_menu_tab_headings` - Menu tab heading (static block)
* `_menu_tab_contents` - Menu tab content (static block)

### 1. Menu Tab Heading

\
![](/files/FuEYxpQ1mEbUUiNnkFF5)\
\
\- At this step, you need to add the **Menu Tab Heading** block.\
\
![](/files/H0oPnklrfdPZZ6xxQXob)<br>

### 2 . Menu Tab Item  ![](/files/POeFrXQDhwxmJcwxzQib)  - Inside the **Menu Tab Content**, add the content you want to display for each heading set up above.  ![](/files/RLhrfJvdh2rpzLtw0r4b) <br>

### - Menu Tab List Settings

### Configuration <a href="#user-content-configuration" id="user-content-configuration"></a>

| Label   | Type   | Description                                                                                                                   | Visibility     |
| ------- | ------ | ----------------------------------------------------------------------------------------------------------------------------- | -------------- |
| Tab for | `text` | Enter the name of the menu or section this tab corresponds to. This should match the heading of the content you want to link. | Always visible |

### Appearance <a href="#user-content-appearance" id="user-content-appearance"></a>

| Label   | Type       | Description                                                 | Visibility                        |
| ------- | ---------- | ----------------------------------------------------------- | --------------------------------- |
| Divider | `checkbox` | Enable this to display a separator line between tab items.  | Always visible                    |
| Borders | `color`    | Set the color for the divider or border lines between tabs. | Visible when "Divider" is enabled |

### - Menu item <a href="#user-content-general" id="user-content-general"></a>

### General <a href="#user-content-general" id="user-content-general"></a>

| Label | Type   | Description                                          | Visibility     |
| ----- | ------ | ---------------------------------------------------- | -------------- |
| Title | `text` | Enter the display name for the menu tab item.        | Always visible |
| Link  | `url`  | Set the target URL that the tab item should link to. | Always visible |

### Menu <a href="#user-content-menu" id="user-content-menu"></a>

| Label   | Type        | Description                                                                     | Visibility     |
| ------- | ----------- | ------------------------------------------------------------------------------- | -------------- |
| Submenu | `link_list` | Select a navigation menu to display as a dropdown or submenu for this tab item. | Always visible |

### Media <a href="#user-content-media" id="user-content-media"></a>

| Label            | Type           | Description                                                                            | Visibility                                    |
| ---------------- | -------------- | -------------------------------------------------------------------------------------- | --------------------------------------------- |
| Type level 1     | `select`       | Choose the type of media to display for the first level: **SVG** icon or an **Image**. | Always visible                                |
| SVG icon level 1 | liquid         | Paste the SVG code for the icon you want to display.                                   | Visible when "Type level 1" is set to "SVG"   |
| Image level 1    | `image_picker` | Upload or select an image to display for the first level.                              | Visible when "Type level 1" is set to "Image" |
| Banner level 2   | `image_picker` | Upload or select a banner image to be displayed in the second level of the menu.       | Always visible                                |

### Need More Help? <a href="#section-settings" id="section-settings"></a>

If you experience any difficulties or require extra support with your Ella theme, feel free to contact our support team through our [Ticket System](https://halosoft.ticksy.com/) — we’ll get back to you within 24 hours.

Simply scan the QR code below to join our Facebook community and stay updated with the latest news, tips, and announcements.

<div align="left"><figure><img src="/files/u3Ke6fbPZZvBlBetfneg" alt="Halothemes Community" width="233"><figcaption></figcaption></figure></div>

<a href="https://www.facebook.com/groups/halothemescommunity" class="button primary" data-icon="comment-dots">Join HaloThemes Community</a>