Ionic Tab (Tab)

Ionic Tab (Tab) is a horizontally arranged button or link used for switching between pages for navigation. It can include a combination of text and icons and is a popular navigation method on mobile devices.

The following tab container uses the tabs class, and each tab uses the tab-item class. By default, the tabs are text-only and do not include icons.

Example

<div class="tabs">
  <a class="tab-item">
    Home
  </a>
  <a class="tab-item">
    Favorites
  </a>
  <a class="tab-item">
    Settings
  </a>
</div>

Try it »

By default, the tab color is default. You can set different color styles: tabs-default, tabs-light, tabs-stable, tabs-positive, tabs-calm, tabs-balanced, tabs-energized, tabs-assertive, tabs-royal, tabs-dark.

To hide the tab bar, use the tabs-item-hide class.

Icon-Only Tabs

Add the tabs-icon-only class after the tabs class to set tabs to display only icons.

<div class="tabs tabs-icon-only">
  <a class="tab-item">
    <i class="icon ion-home"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
  </a>
</div>

Try it »

Top Icon + Text Tabs

Add the tabs-icon-top class after the tabs class to set tabs to display icons on top with text.

<div class="tabs tabs-icon-top">
  <a class="tab-item" href="#">
    <i class="icon ion-home"></i>
    Home
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-star"></i>
    Favorites
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-gear-a"></i>
    Settings
  </a>
</div>

Try it »

Left Icon + Text Tabs

Add the tabs-icon-left class after the tabs class to set tabs to display icons on the left with text.

<div class="tabs tabs-icon-left">
  <a class="tab-item">
    <i class="icon ion-home"></i>
    Home
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
    Favorites
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
    Settings
  </a>
</div>

Try it »

Striped Style Tabs

You can add tabs-striped to an element with the tabs class name to achieve Android-style tabs. You can also add tabs-top to place the tabs at the top of the page.

Striped tab colors can be controlled via tabs-background-{color} and tabs-color-{color}, where {color} values can be: default, light, stable, positive, calm, balanced, energized, assertive, royal, or dark.

Note: To set a header title on the tabs, use the has-tabs-top class.

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">

<a class="tab-item active" href="#">
  <i class="icon ion-home"></i>
  Test
</a>
<a class="tab-item" href="#">
  <i class="icon ion-star"></i>
  Favorites
</a>
<a class="tab-item" href="#">
  <i class="icon ion-gear-a"></i>
  Settings
</a>
</div>
</div>
<div class="tabs-striped tabs-color-assertive">
<div class="tabs">
  <a class="tab-item active" href="#">
    <i class="icon ion-home"></i>
    Test
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-star"></i>
    Favorites
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-gear-a"></i>
    Settings
  </a>
</div>
</div>

Try it »

The effect is as follows: