# 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>


---

# 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://halosoft.gitbook.io/ella-7-documentation/header-group/header-mobile-multi-tab.md?ask=<question>
```

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.