Tab Bar

Tab Bar is a particular case of Toolbar, but it contains icons (or icons with labels) instead of plain links and inteded to be used with Tabs.

Tab Bar Layout

Tab bar layout is almost the same as for Toolbar, but Tab bar has additional "tabbar" class:

<div class="toolbar tabbar">
    <div class="toolbar-inner">
        <a href="#tab1" class="tab-link active">
            <i class="icon demo-icon-1"></i>
        </a>
        <a href="#tab2" class="tab-link">
            <i class="icon demo-icon-2"></i>
        </a>
        <a href="#tab3" class="tab-link">
            <i class="icon demo-icon-3"></i>
        </a>
        <a href="#tab4" class="tab-link">
            <i class="icon demo-icon-4"></i>
        </a>
    </div>
</div>

By default, all Tab Bar elements (links) equally spaced along toolbar - they have equal space between each other. But here is important note about links size

  • On iPhone all links will have the same size equal to [screen width] / [number of links]

  • On iPad all links will be centered with minimal width equal to 105px

Add badges to icons

If you need to add badges to Tab Bar icons, just put <span class="badge"> inside of icon:

<div class="toolbar tabbar">
    <div class="toolbar-inner">
        <a href="#tab1" class="tab-link active">
            <i class="icon demo-icon-1"></i>
        </a>
        <a href="#tab2" class="tab-link">
            <i class="icon demo-icon-2">
                <span class="badge bg-red">5</span>
            </i>
        </a>
        <a href="#tab3" class="tab-link">
            <i class="icon demo-icon-3"></i>
        </a>
        <a href="#tab4" class="tab-link">
            <i class="icon demo-icon-4">
                <span class="badge bg-green">15</span>
            </i>
        </a>
    </div>
</div>

Tab Bar with labels

If you need to use Tab Bar icons with labels we need one more "tabbar-labels" class on Tab Bar, and to put <span class="tabbar-label"> inside of link:

<div class="toolbar tabbar tabbar-labels">
    <div class="toolbar-inner">
        <a href="#tab1" class="tab-link active">
            <i class="icon demo-icon-1"></i>
            <span class="tabbar-label">Label 1</span>
        </a>
        <a href="#tab2" class="tab-link">
            <i class="icon demo-icon-2">
                <span class="badge bg-red">5</span>
            </i>
            <span class="tabbar-label">Label 2</span>
        </a>
        <a href="#tab3" class="tab-link">
            <i class="icon demo-icon-3"></i>
            <span class="tabbar-label">Label 3</span>
        </a>
        <a href="#tab4" class="tab-link">
            <i class="icon demo-icon-4"></i>
            <span class="tabbar-label">Label 4</span>
        </a>
    </div>
</div>

Note that Tab Bar with labels will have more height instead of usual 44px: 50px on iPhone and 55px on iPad

Because of more height, you should use "tabbar-labels-fixed" or "tabbar-labels-through" for Fixed and Through layouts with Tab Bar

Scrollable Tab Bar

Scrollable Tab Bar is available only for Material Theme

When you have a lot of links and they all don't fit into view, then it could be useful to use scrollable Tab Bar. It allows to swipe/scroll through tab links.

All we need to make Tab Bar scrollable is just to add additional "tabbar-scrollable" class to Tab Bar:

<div data-page="home" class="page toolbar-fixed navbar-fixed">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="center">Scrollable Tab Bar</div>
    </div>
  </div>
  <!-- Additional "tabbar-scrollable" class -->
  <div class="toolbar tabbar tabbar-scrollable">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link active">Tab 1</a>
      <a href="#tab-2" class="tab-link">Tab 2</a>
      <a href="#tab-3" class="tab-link">Tab 3</a>
      <a href="#tab-4" class="tab-link">Tab 4</a>
      <a href="#tab-5" class="tab-link">Tab 5</a>
      <a href="#tab-6" class="tab-link">Tab 6</a>
      <a href="#tab-7" class="tab-link">Tab 7</a>
      <a href="#tab-8" class="tab-link">Tab 8</a>
      <a href="#tab-9" class="tab-link">Tab 9</a>
      <a href="#tab-10" class="tab-link">Tab 10</a>
      <a href="#tab-11" class="tab-link">Tab 11</a>
      <a href="#tab-12" class="tab-link">Tab 12</a>
    </div>
  </div>
  ...
</div>

Related App Methods

myApp.hideToolbar(toolbar, isAnimated) Hide specified tab bar.
toolbar - HTMLElement or string (with CSS Selector) of required tab bar. Required.
isAnimated - Boolean - Default: true
myApp.showToolbar(toolbar, isAnimated) Show specified tab bar.
toolbar - HTMLElement or string (with CSS Selector) of required tab bar. Required.
isAnimated - Boolean - Default: true

Hide Tab Bar Automatically

Framework7 allows you to hide/show Tab Bar automatically for some Ajax loaded pages where you may not need it. It is useful only when you use through-type layout.

To make it work all you need is to add "no-tabbar" class to loaded page (<div class="page no-tabbar">):

<!-- Page has additional "no-tabbar" class -->
<div data-page="about" class="page no-tabbar">
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="back button">Go Back</a></p>
      ...
    </div>
  </div>
</div>