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

# Tab navigation

Configure a tabbed header navigation with separate menus for each tab.

{% embed url="<https://www.youtube.com/watch?v=EENkXTjqjXA>" %}

## Tab navigation

{% hint style="warning" icon="alarm-exclamation" %}
**Note!** Using the following options, the [*<mark style="color:$primary;">Main navigation</mark>*](/triumph/header/header/main-navigation.md) will be disabled and replaced by the settings applied in the [*<mark style="color:$primary;">Tab 1 -Tab 5</mark>*](#tab-1-tab-5) setting groups.
{% endhint %}

Turn on '**Enable**' to replace the main menu with a tabbed layout.

* Each tab can have its own label, link, and menu.
* Clicking a tab opens an associated page
* Submenu items appear under each tab on hover.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FDtXE8sH9V7z34XEJPcVv%2Fheader_tab%20navigation.png?alt=media&amp;token=bbaf3049-2beb-4347-8d12-68608b0830b8" alt=""><figcaption></figcaption></figure>

**Elastic animation**\
Adds a smooth animation when switching between tabs.

## Tab 1 - Tab 5

{% hint style="success" %}
Using the provided set of options lets you create and configure each tab individually.\
The section includes the settings to create up to five tabs.\
Use the *Dropdowns* block under the [<mark style="color:$primary;">Menu dropdowns</mark>](/triumph/header/header/menu-dropdowns.md) to customize the *Mega menu*.
{% endhint %}

**Title**\
Set the tab name.

**Link**\
Add a page link.

**Menu**\
Assign a menu to the tab.\
Create a menu in your *Shopify admin -> Content -> Menus*.\
Read the '[<mark style="color:$primary;">Menu and Links</mark>](http://help.shopify.com/en/manual/online-store/menus-and-links)' page for more information about setting up menus.

> **Tab behavior during site navigation**
>
> As users navigate the site (moving between collection pages, product pages, and other sections), only one tab automatically becomes active.
>
> The active tab is determined based on how the current page (collection or product) matches the menu structure assigned to the tabs.
>
> If a user is on a collection page and a link to that collection is included in the menu assigned to a specific tab, that tab will be displayed as active.
> \
> *Example*: If the 'Dresses' collection is included in the menu of the 'Women' tab, then the 'Women' tab will be active when that collection is opened.
>
> If a user is on a product page and the product belongs to a collection that is included in a tab’s menu, the corresponding tab will also be active.
>
> *Example*: If a product belongs to the 'Kids shoes' collection and that collection is added to the menu of the 'Kids' tab, then the 'Kids' tab will be active on the product page.
>
> <mark style="color:orange;">**Note:**</mark> If the current page does not belong to any collection and is not included in any tab menu, the FIRST TAB will be active by default.