Tabs

Tabs allow to simply switch between different content.

Tabs Layout

Let's look at Tabs layout:

<!-- Tabs wrapper, shoud have "tabs" class. Required element -->
<div class="tabs">
  <!-- First tab, should have "tab" class and unique id attribute -->
  <!-- First tab is active by default - additional "tab-active" class -->
  <div class="tab tab-active" id="tab1">
    ... Tab 1 content goes here ...
  </div>
  <!-- Second tab, should have "tab" class and unique id attribute -->
  <div class="tab" id="tab2">
    ... Tab 2 content goes here ...
  </div>
  <!-- Third tab, should have "tab" class and unique id attribute -->
  <div class="tab" id="tab3">
    ... Tab 3 content goes here ...
  </div>
</div>

Where:

div class="tabs" - required wrapper for all tabs. If you miss this element, tabs will not work!
div class="tab" - single tab. Should have unique id attribute
div class="tab tab-active" - single active tab. Tab which is active (visible) by default, should have additional tab-active class

Scrollable Tabs

If you put tabs inside of scrollable <div class="page-content"> then they will have mutual scrolling - scrolling one tab will basically scroll the all tabs as well. To avoid this (if this is a case), it is recommended to make each tab as page-content, in this case each tab will have own scrolling:

<div class="page">
  <div class="navbar">...</div>
  <!-- tabs is a direct child of page -->
  <div class="tabs">
    <!-- each tabs is a "page-content" -->
    <div class="page-content tab tab-active" id="tab1">
      ... Tab 1 content goes here ...
    </div>
    <div class="page-content tab" id="tab2">
      ... Tab 2 content goes here ...
    </div>
    <!-- Third tab, should have "tab" class and unique id attribute -->
    <div class="page-content tab" id="tab3">
      ... Tab 3 content goes here ...
    </div>
  </div>
</div>

Switching Between Tabs

After we have our tabs layout we need some contoller so user can switch between them.

To make it work we need to create links (<a> tags) with tab-link class and href attribute equal to the id attribute of target tab:

<!-- Link that activates first tab, has the same href attribute (#tab1) as the id attribute of first tab (tab1)  -->
<a href="#tab1" class="tab-link tab-link-active">Tab 1</a>

<!-- Link that activates 2nd tab, has the same href attribute (#tab2) as the id attribute of 2nd tab (tab2)  -->
<a href="#tab2" class="tab-link">Tab 2</a>

<!-- Link that activates 3rd tab, has the same href attribute (#tab2) as the id attribute of 3rd tab (tab3)  -->
<a href="#tab3" class="tab-link">Tab 3</a>

As you may see, first link also has tab-link-active class. It is not required, but if all such links will be on the same DOM tree level (the same-level children of mutual parent), then script will also change this tab-link-active class on link related to the active tab. It is useful when your "active" link has different visual style (like buttons in Segmented Control or links in Tabbar)

Switch Multiple Tabs

Such notation as above uses ID attributes to specify tabs we need to switch to. But sometimes we may have situation when we need to switch few tabs using one tab-link, for this case we may use classes instead of IDs and data-tab attribute for tab-link. For example:

<!-- Top Tabs -->
<div class="tabs tabs-top">
  <div class="tab tab1 tab-active">...</div>
  <div class="tab tab2">...</div>
  <div class="tab tab3">...</div>
</div>
<!-- Bottom Tabs -->
<div class="tabs tabs-bottom">
  <div class="tab tab1 tab-active">...</div>
  <div class="tab tab2">...</div>
  <div class="tab tab3">...</div>
</div>
<!-- Tabs links -->
<div>
  <!-- This links will switch top and bottom tabs to .tab1 -->
  <a href="#" class="tab-link tab-link-active" data-tab=".tab1">Tab 1</a>
  <!-- This links will switch top and bottom tabs to .tab2 -->
  <a href="#" class="tab-link" data-tab=".tab2">Tab 2</a>
  <!-- This links will switch top and bottom tabs to .tab3 -->
  <a href="#" class="tab-link" data-tab=".tab3">Tab 3</a>
</div>

Where data-tab attribute of tab-link with CSS selector of target tab/tabs

Views As Tabs

Why single Tab could not be a separate View with its own navigation and layout? It can, so you can just switch Views as tabs. In this case we will have kind of Tabbed app structure, where each tab represents separate View:

<body>
  <!-- App root -->
  <div id="app">
    <!-- Views/Tabs container -->
    <div class="views tabs">
      <!--
        Tabbar for switching views-tabs. Should be a first child in Views.
        Additional "toolbar-bottom" class to set it on bottom
      -->
      <div class="toolbar tabbar toolbar-bottom">
        <div class="toolbar-inner">
          <a href="#view-home" class="tab-link tab-link-active">
            <i class="icon icon-home"></i>
          </a>
          <a href="#view-catalog" class="tab-link">
            <i class="icon icon-catalog"></i>
          </a>
          <a href="#view-settings" class="tab-link">
            <i class="icon icon-settings"></i>
          </a>
        </div>
      </div>
      <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
      <div id="view-home" class="view view-main tab tab-active">
        ...
      </div>

      <!-- Catalog View -->
      <div id="view-catalog" class="view tab">
        ...
      </div>

      <!-- Settings View -->
      <div id="view-settings" class="view tab">
        ...
      </div>
    </div>
  </div>
  ...
</body>

Animated Tabs

It is also possible to switch tabs with simple transition. This requires additional div class="tabs-animated-wrap" wrapper for div class="tabs":

<!-- Tabs animated wrapper, required to switch tabs with transition -->
<div class="tabs-animated-wrap">

  <!-- Tabs, tabs wrapper -->
  <div class="tabs">
    <!-- Tab 1, active by default -->
    <div id="tab1" class="tab tab-active">
      ... Tab 1 content ...
    </div>

    <!-- Tab 2 -->
    <div id="tab2" class="tab">
      ... Tab 2 content ...
    </div>

    <!-- Tab 3 -->
    <div id="tab3" class="tab">
      ... Tab 3 content ...
    </div>
  </div>
</div>

Note that animted tabs wrapper div class="tabs-animated-wrap" must have fixed height. By default, it is 100% height of its parent

Swipeable Tabs

It is also possible to switch tabs with swipes. This requires using Swiper Element (which is already part of the Framework7).

In this example let's put tab links in Subnavbar and we will use page-content as tab to keep scrolling position for each tab separately:

<!-- Swiper Element should be used as Tabs -->
<swiper-container class="tabs">
  <!-- Each Tab must be a "swiper-slide" element -->

  <!-- Tab 1, active by default -->
  <swiper-slide id="tab1" class="tab tab-active">
    ... Tab 1 content ...
  </swiper-slide>
  <!-- Tab 2 -->
  <swiper-slide id="tab2" class="tab">
    ... Tab 2 content ...
  </swiper-slide>
  <!-- Tab 3 -->
  <swiper-slide id="tab3" class="tab">
    ... Tab 3 content ...
  </swiper-slide>
</swiper-container>

Tabs App Methods

We can control tabs using the following app methods:

app.tab.show(tabEl, animate)

tabEl - HTMLElement or string (with CSS Selector) of Tab to show. Required
animate - boolean - Should it become visible with animation or not (in case of animated or swipeable tabs). Optional
This method returns object with newTabEl and oldTabEl properties with shown and hidden tabs HTML elements

app.tab.show(tabEl, tabLinkEl, animate)

tabEl - HTMLElement or string (with CSS Selector) of Tab to show. Required
tabLinkEl - HTMLElement or string (with CSS Selector) of Tab link/button to be activated with this tab. Useful to pass in case you have a complex layout to tell Framework7 which tab link/button must be activated
animate - boolean - Should it become visible with animation or not (in case of animated or swipeable tabs). Optional
This method returns object with newTabEl and oldTabEl properties with shown and hidden tabs HTML elements

Tabs Events

Tabs will fire the following DOM events on tab elements and events on app instance:

DOM Events

Event	Target	Description
tab:show	Tab Element<div class="tab">	Event will be triggered when Tab becomes visible/active
tab:hide	Tab Element<div class="tab">	Event will be triggered when Tab becomes hidden/inactive
page:tabshow	Page Element<div class="page">	Event will be triggered when page's parent View as Tab becomes visible
page:tabhide	Page Element<div class="page">	Event will be triggered when page's parent View as Tab becomes hidden

App Instance Events

There are app instance events as well:

Event	Arguments	Target	Description
tabShow	tabEl	app	Event will be triggered when Tab becomes visible/active. As an argument event handler receives tab that became visible
tabHide	tabEl	app	Event will be triggered when Tab becomes hidden/inactive. As an argument event handler receives tab that became hidden
pageTabShow	pageEl	app	Event will be triggered when page's parent View as Tab becomes visible. As an argument event handler receives page element which is a child of the View-Tab that became visible
pageTabHide	pageEl	app	Event will be triggered when page's parent View as Tab becomes hidden. As an argument event handler receives page element which is a child of the View-Tab that became hidden

Routable Tabs

Tabs can be routable. What routable tabs means and why is it good?

First of all, it provides opportunity to navigate to tabs by usual links instead of so called special tab-links.
Second, when navigating to such tab routes you can load a page with required tab opened.
Third, with enabled Browser History, the same tab will be opened when you navigate back and forward in history.
And the last but not least, when using routable tabs you can load tab content in the same ways as for pages, i.e. using url, content, component or componentUrl

First of all we need to specify tabs routes in app routes. Let's assume we have a page with routable tabs on /tabs/ route:

routes = [
  {
    // Page main route
    path: '/tabs/',
    // Will load page from tabs/index.html file
    url: './pages/tabs/index.html',
    // Pass "tabs" property to route, must be array with tab routes:
    tabs: [
      // First (default) tab has the same url as the page itself
      {
        // Tab path
        path: '/',
        // Tab id
        id: 'tab-1',
        // Fill this tab content from content string
        content: `
          <div class="block">
            <h3>About Me</h3>
            <p>...</p>
          </div>
        `
      },
      // Second tab
      {
        path: '/tab-2/',
        id: 'tab-2',
        // Fill this tab content with Ajax request:
        url: './pages/tabs/tab-2.html',
      },
      // Third tab
      {
        path: '/tab-3/',
        id: 'tab-3',
        // Load this tab content as a component with Ajax request:
        componentUrl: './pages/tabs/tab-3.html',
      },
    ],
  }
]

On the /tabs/index.html page we may have the following structure, for example:

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Routable Tabs</div>
    </div>
  </div>
  <div class="toolbar tabbar toolbar-bottom">
    <div class="toolbar-inner">
      <!-- additional "data-route-tab-id" must match to tab's ID in the specified routes -->
      <a href="/" class="tab-link" data-route-tab-id="tab-1">Tab 1</a>
      <a href="/tab-2/" class="tab-link" data-route-tab-id="tab-2">Tab 2</a>
      <a href="/tab-3/" class="tab-link" data-route-tab-id="tab-3">Tab 3</a>
    </div>
  </div>
  <!-- Additional "tabs-routable" is required on tabs -->
  <div class="tabs tabs-routable">
    <div class="tab page-content" id="tab-1"></div>
    <div class="tab page-content" id="tab-2"></div>
    <div class="tab page-content" id="tab-3"></div>
  </div>
</div>

Almost the same as with usual tabs but with the difference that there is no more "tab-link-active" and "tab-active" classes on tab links and tabs. These classes and tabs will be switched by router. And there is a new attribute and class:

data-route-tab-id - additional tab link attribute which is required for tabs switcher to understand which link related to the required route
tabs-routable - required additional class on tabs element

Note that Views can not be used as Routable Tabs. Routable Tabs can be used only inside of View/Router!

Routable Tabs Events

Router will fire the following DOM events on tab elements and events on router/view/app instance when routable tab content is loaded:

DOM Events

Event	Target	Description
tab:init tab:mounted	Tab Element<div class="tab">	Event will be triggered right after routable Tab content will be loaded
tab:beforeremove	Tab Element<div class="tab">	Event will be triggered right before routable Tab content will be removed

Router Instance Events

Router instance emits events on both self instance, then on its parent view instance and app instance:

Event	Target	Arguments	Description
tabInit tabMounted	router view app	(newTabEl, tabRoute)	Event will be triggered right after routable Tab content will be loaded. As an argument event handler receives: `newTabEl` - tab HTML element where route content was just loaded (new tab) `tabRoute` - new tab route
tabBeforeRemove	router view app	(oldTabEl, newTabEl, tabRoute)	Event will be triggered right before routable Tab content will be removed. As an argument event handler receives: `oldTabEl` - tab HTML element where route content was just removed (old tab) `newTabEl` - tab HTML element where route content was just loaded (new tab) `tabRoute` - new tab route

Examples

tabs-static.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Static Tabs</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom tabbar">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link 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>
    </div>
  </div>
  <div class="tabs">
    <div id="tab-1" class="page-content tab tab-active">
      <div class="block">
        <p>Tab 1 content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
          voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
          laboriosam accusamus?</p>
        <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
          exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
          dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
        <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
          consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
          perferendis.</p>
        <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
          consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
          iusto, repellat sed quisquam!</p>
        <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
          voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
          Adipisci!</p>
        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
          autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
          impedit.</p>
        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
          consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
          Iure fugit, minima facere.</p>
      </div>
    </div>
    <div id="tab-2" class="page-content tab">
      <div class="block">
        <p>Tab 2 content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
          voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
          laboriosam accusamus?</p>
        <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
          exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
          dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
        <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
          consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
          perferendis.</p>
        <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
          consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
          iusto, repellat sed quisquam!</p>
        <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
          voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
          Adipisci!</p>
        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
          autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
          impedit.</p>
        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
          consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
          Iure fugit, minima facere.</p>
      </div>
    </div>
    <div id="tab-3" class="page-content tab">
      <div class="block">
        <p>Tab 3 content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
          voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
          laboriosam accusamus?</p>
        <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
          exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
          dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
        <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
          consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
          perferendis.</p>
        <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
          consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
          iusto, repellat sed quisquam!</p>
        <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
          voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
          Adipisci!</p>
        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
          autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
          impedit.</p>
        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
          consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
          Iure fugit, minima facere.</p>
      </div>
    </div>
  </div>
</div>

Animated Tabs

tabs-animated.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Animated Tabs</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom tabbar">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link 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>
    </div>
  </div>
  <div class="tabs-animated-wrap">
    <div class="tabs">
      <div id="tab-1" class="page-content tab tab-active">
        <div class="block">
          <p>Tab 1 content</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
            voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
            laboriosam accusamus?</p>
          <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
            exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
            dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
          <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
            consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
            perferendis.</p>
          <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
            consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
            iusto, repellat sed quisquam!</p>
          <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
            voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
            Adipisci!</p>
          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
            autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
            impedit.</p>
          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
            consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
            Iure fugit, minima facere.</p>
        </div>
      </div>
      <div id="tab-2" class="page-content tab">
        <div class="block">
          <p>Tab 2 content</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
            voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
            laboriosam accusamus?</p>
          <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
            exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
            dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
          <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
            consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
            perferendis.</p>
          <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
            consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
            iusto, repellat sed quisquam!</p>
          <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
            voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
            Adipisci!</p>
          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
            autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
            impedit.</p>
          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
            consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
            Iure fugit, minima facere.</p>
        </div>
      </div>
      <div id="tab-3" class="page-content tab">
        <div class="block">
          <p>Tab 3 content</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
            voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
            laboriosam accusamus?</p>
          <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
            exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
            dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
          <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
            consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
            perferendis.</p>
          <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
            consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
            iusto, repellat sed quisquam!</p>
          <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
            voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
            Adipisci!</p>
          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
            autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
            impedit.</p>
          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
            consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
            Iure fugit, minima facere.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Swipeable Tabs

tabs-swipeable.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Swipeable Tabs</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom tabbar">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link 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>
    </div>
  </div>
  <swiper-container class="tabs">
    <swiper-slide id="tab-1" class="page-content tab tab-active">
      <div class="block">
        <p>Tab 1 content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
          voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
          laboriosam accusamus?</p>
        <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
          exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
          dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
        <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
          consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
          perferendis.</p>
        <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
          consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
          iusto, repellat sed quisquam!</p>
        <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
          voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
          Adipisci!</p>
        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
          autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
          impedit.</p>
        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
          consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
          Iure fugit, minima facere.</p>
      </div>
    </swiper-slide>
    <swiper-slide id="tab-2" class="page-content tab">
      <div class="block">
        <p>Tab 2 content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
          voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
          laboriosam accusamus?</p>
        <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
          exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
          dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
        <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
          consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
          perferendis.</p>
        <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
          consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
          iusto, repellat sed quisquam!</p>
        <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
          voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
          Adipisci!</p>
        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
          autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
          impedit.</p>
        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
          consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
          Iure fugit, minima facere.</p>
      </div>
    </swiper-slide>
    <swiper-slide id="tab-3" class="page-content tab">
      <div class="block">
        <p>Tab 3 content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
          voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
          laboriosam accusamus?</p>
        <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
          exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
          dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
        <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
          consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
          perferendis.</p>
        <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
          consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
          iusto, repellat sed quisquam!</p>
        <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
          voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
          Adipisci!</p>
        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
          autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
          impedit.</p>
        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
          consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
          Iure fugit, minima facere.</p>
      </div>
    </swiper-slide>
  </swiper-container>
</div>

Routable Tabs

var app = new Framework7({
  routes: [
    {
      path: '/',
      id: 'tab1',
      content: `
        <div class="block">
          <p>Tab 1 content</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
          <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
          <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
        </div>
      `,
    },
    {
      path: '/tab2/',
      id: 'tab2',
      content: `
        <div class="block">
          <p>Tab 2 content</p>
          <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
        </div>
      `,
    },
    {
      path: '/tab3/',
      id: 'tab3',
      content: `
        <div class="block">
          <p>Tab 3 content</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
        </div>
      `,
    },
  ]
});

tabs-routable.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Tabs Routable</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom tabbar">
    <div class="toolbar-inner">
      <a href="./" class="tab-link" data-route-tab-id="tab1">Tab 1</a>
      <a href="tab2/" class="tab-link" data-route-tab-id="tab2">Tab 2</a>
      <a href="tab3/" class="tab-link" data-route-tab-id="tab3">Tab 3</a>
    </div>
  </div>
  <div class="tabs tabs-routable">
    <div class="page-content tab" id="tab1"></div>
    <div class="page-content tab" id="tab2"></div>
    <div class="page-content tab" id="tab3"></div>
  </div>
</div>

Improve this Doc

On this page

Tabs Layout

Scrollable Tabs

Switching Between Tabs
Switch Multiple Tabs
Views As Tabs
Animated Tabs
Swipeable Tabs
Tabs App Methods
Tabs Events

DOM Events
App Instance Events

Routable Tabs

Routable Tabs Events

Examples

Animated Tabs
Swipeable Tabs
Routable Tabs