> 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.
#### **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.**
#### **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.
#### Block Types Supported
* `_menu_tab_headings` - Menu tab heading (static block)
* `_menu_tab_contents` - Menu tab content (static block)
### 1. Menu Tab Heading
\
\
\
\- At this step, you need to add the **Menu Tab Heading** block.\
\
### 2 . Menu Tab Item  - Inside the **Menu Tab Content**, add the content you want to display for each heading set up above. 
### - Menu Tab List Settings
### Configuration
| 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
| 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
### General
| 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
| 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
| 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?
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.
