Toolbar / Tabbar

Toolbar is a fixed area at the top or bottom of the screen that contains navigation elements.

Toolbar HTML Layout

Toolbar layout is very simple:

<div class="toolbar">
  <div class="toolbar-inner">
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 2</a>
    <a href="#" class="link">Link 3</a>
  </div>
</div>

Toolbar Position

Toolbar can be placed on top of the page, or on bottom. So we always also need to specify its position by addition class.

To make it on the top, we need to add toolbar-top class to Toolbar element:

<!-- Top Toolbar -->
<div class="toolbar toolbar-top">
  <div class="toolbar-inner">
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 2</a>
    <a href="#" class="link">Link 3</a>
  </div>
</div>

To make it on the bottom, we need to add toolbar-bottom class to Toolbar element:

<!-- Bottom Toolbar -->
<div class="toolbar toolbar-bottom">
  <div class="toolbar-inner">
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 2</a>
    <a href="#" class="link">Link 3</a>
  </div>
</div>

We can also use different positions for iOS, MD and Aurora themes at the same time by using the following classes: toolbar-top-ios, toolbar-top-md, toolbar-top-aurora, toolbar-bottom-ios, toolbar-bottom-md, toolbar-bottom-aurora.

Theme-Specific Styling

In iOS theme, by default, Toolbar/Tabbar has thin border on the top. To disable this border you need to add no-hairline class to toolbar element:

<div class="toolbar no-hairline">...</div>

In MD theme, by default, Toolbar/Tabbar has shadow. To disable this shadow you need to add no-shadow class to toolbar element:

<div class="toolbar no-shadow">...</div>

Toolbar Type

Now let's look where we can place our Toolbar / Tabbar in DOM. There are several rules to place Toolbar.

Static Toolbar

Static toolbar type is the probably most rarely used layout type. In this case Toolbar / Tabbar is just part of the scrollable page content:

<div class="page">
  <!-- Fixed navbar goes first -->
  <div class="navbar">...</div>

  <!-- Scrollable page content -->
  <div class="page-content">
    ...

    <!-- Static toolbar goes in the end inside of page-content -->
    <div class="toolbar">...</div>
  </div>
</div>

Fixed Toolbar

Fixed toolbar is also part of the page but it is always visible on screen not depending on page scroll. In this case it must be a direct child of page and if page has also fixed Navbar then it must be AFTER Navbar:

<div class="page">
  <!-- Fixed navbar goes first -->
  <div class="navbar">...</div>
  <!-- Fixed toolbar goes ALWAYS after Navbar -->
  <div class="toolbar toolbar-bottom">...</div>

  <!-- Scrollable page content -->
  <div class="page-content">
    ...
  </div>
</div>

Fixed Toolbar/Tabbar must always be a direct child of a page and AFTER the Navbar (if fixed navbar is used on this page)

Common Toolbar

If we need only one common toolbar for all pages in View then it must be a direct child of this view and be BEFORE all pages in view:

<div class="view">
  <!-- View common toolbar -->
  <div class="toolbar toolbar-bottom">...</div>

  <!-- Pages -->
  <div class="page">...</div>
</div>

If we need only one common toolbar / tabbar for all views then it must be a direct child of Views element and be BEFORE all views. Such layout mainly used in multiple views/tabbed app layout with toolbar

<div class="views tabs">
  <!-- Views common toolbar / tabbar -->
  <div class="toolbar tabbar toolbar-bottom">...</div>

  <div class="view tab tab-active" id="tab-1">...</div>
  <div class="view tab" id="tab-2">...</div>
  ...
</div>

Common Toolbar/Tabbar must always be a direct child of Views/View and placed AFTER Navbar (if same positioned navbar is used)

Toolbar App Methods

We can use following app methods available for Toolbars:

app.toolbar.hide(toolbarEl, animate)Hide toolbar
  • toolbarEl - HTMLElement or string (with CSS Selector) of required toolbar. Required.
  • animate - Boolean - whether it should be hidden with animation or not. By default is true
app.toolbar.show(toolbarEl, animate)Show toolbar
  • toolbarEl - HTMLElement or string (with CSS Selector) of required toolbar. Required.
  • animate - Boolean - whether it should be shown with animation or not. By default is true
app.toolbar.setHighlight(tabbarEl)Set highlight on tab links according to active one. This will have effect only in MD theme
  • tabbarEl - HTMLElement or string (with CSS Selector) of required tabbar. Required.

Toolbar App Parameters

It is possible to control some default toolbar behavior using global app parameters by passing toolbar related parameters under toolbar parameter:

ParameterTypeDefaultDescription
hideOnPageScrollbooleanfalseWill hide Toolbars/Tabbars on page scroll
showOnPageScrollEndbooleantrueSet to true to show hidden Toolbar/Tabbar when scrolling reaches end of the page
showOnPageScrollTopbooleantrueSet to false and hidden Toolbar/Tabbar will not become visible when you scroll page to top everytime. They will become visible only at the most top scroll position, in the beginning of the page

For example:

var app = new Framework7({
  toolbar: {
    hideOnPageScroll: true,
  },
});

Tabbar

Tabbar 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.

Tabbar Layout

Tabbar layout is almost the same as for Toolbar, but Tabbar has additional tabbar class:

<div class="toolbar tabbar toolbar-bottom">
  <div class="toolbar-inner">
    <a href="#tab1" class="tab-link 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>
    ....
  </div>
</div>

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

  • On narrow screen (phone) all links will have the same size equal to [screen width] / [number of links]

  • On wide screen (tablet) all links will be centered with minimal width equal to 105px

Tabbar With Labels

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

<div class="toolbar tabbar tabbar-labels toolbar-bottom">
  <div class="toolbar-inner">
    <a href="#tab1" class="tab-link 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"></i>
      <span class="tabbar-label">Label 2</span>
    </a>
    ...
  </div>
</div>

Scrollable Tabbar

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

All we need to make Tabbar scrollable is just to add additional tabbar-scrollable class to the Tabbar:

<!-- Additional "tabbar-scrollable" class -->
<div class="toolbar tabbar tabbar-scrollable toolbar-bottom">
  <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>
    ...
    <a href="#tab-12" class="tab-link">Tab 12</a>
  </div>
</div>

Control Toolbar/Tabbar With Page Classes

Framework7 allows you to hide/show Toolbar/Tabbar on specific page or on specific page scroll by using additional classes.

If you want to hide toolbar/tabbar on page scroll on some specific page use additional classes on this page's <div class="page-content"> element:

  • hide-bars-on-scroll - to hide both Navbar and Toolbar on page scroll
  • hide-toolbar-on-scroll - to hide Toolbar/Tabbar on page scroll

To disable this behavior on specific pages you may use the following additional classes:

  • keep-bars-on-scroll - to keep Navbar and Toolbar on page scroll
  • keep-toolbar-on-scroll - to keep Toolbar on page scroll

For example:

<div class="page">
  <div class="navbar">
    ...
  </div>
  <!-- "hide-toolbar-on-scroll" class to hide Toolbar -->
  <div class="page-content hide-toolbar-on-scroll">
    <div class="block">
      <p>Scroll page down</p>
      ...
    </div>
  </div>
  <div class="toolbar toolbar-bottom">
    <div class="toolbar-inner">
      <a href="#" class="link">Hello</a>
      <a href="#" class="link">World</a>
    </div>
  </div>
</div>

If you have common single Toolbar / Tabbar across all pages/views of your app you can hide/show Toolbar/Tabbar automatically for some pages where you don't need it.

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

<!-- Page has additional "no-toolbar" class -->
<div class="page no-toolbar">
  <div class="page-content">
      ...
  </div>
</div>

Toolbar Events

Toolbar will fire the following DOM events on Toolbar element (<div class="toolbar">) and app events on app instance:

DOM Events

EventTargetDescription
toolbar:hideToolbar <div class="toolbar">Event will be triggered when Toolbar becomes hidden
toolbar:showToolbar <div class="toolbar">Event will be triggered when Toolbar becomes visible

App Events

EventArgumentsDescription
toolbarHide(el)Event will be triggered when Toolbar becomes hidden
toolbarShow(el)Event will be triggered when Toolbar becomes visible

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

:root {
  /*
  --f7-toolbar-bg-color: var(--f7-bars-bg-color);
  --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-toolbar-bg-image: var(--f7-bars-bg-image);
  --f7-toolbar-border-color: var(--f7-bars-border-color);
  --f7-toolbar-link-color: var(--f7-bars-link-color);
  --f7-toolbar-text-color: var(--f7-bars-text-color);
  --f7-tabbar-link-active-color: var(--f7-theme-color);
  */
  --f7-tabbar-link-active-bg-color: transparent;
  --f7-tabbar-label-text-transform: none;
  --f7-toolbar-hide-show-transition-duration: 400ms;
}
.ios {
  --f7-toolbar-height: 44px;
  --f7-toolbar-font-size: 17px;
  --f7-toolbar-inner-padding-left: 8px;
  --f7-toolbar-inner-padding-right: 8px;
  /*
  --f7-toolbar-link-height: var(--f7-toolbar-height);
  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
  */
  --f7-tabbar-labels-height: 50px;
  --f7-tabbar-labels-tablet-height: 50px;
  --f7-toolbar-top-shadow-image: none;
  --f7-toolbar-bottom-shadow-image: none;
  --f7-tabbar-icon-size: 28px;
  --f7-tabbar-link-text-transform: none;
  --f7-tabbar-link-font-weight: 400;
  --f7-tabbar-link-letter-spacing: 0;
  --f7-tabbar-label-font-size: 12px;
  --f7-tabbar-label-tablet-font-size: 14px;
  --f7-tabbar-label-font-weight: 500;
  --f7-tabbar-label-letter-spacing: 0.01;
  --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.4);
}
.ios .dark,
.ios.dark {
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
}
.md {
  --f7-toolbar-height: 48px;
  --f7-toolbar-font-size: 14px;
  --f7-toolbar-inner-padding-left: 0px;
  --f7-toolbar-inner-padding-right: 0px;
  /*
  --f7-toolbar-link-height: var(--f7-toolbar-height);
  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
  */
  --f7-tabbar-labels-height: 56px;
  --f7-tabbar-labels-tablet-height: 56px;
  /*
  --f7-tabbar-link-active-border-color: var(--f7-theme-color);
  */
  --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
  --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
  --f7-tabbar-icon-size: 24px;
  --f7-tabbar-link-text-transform: uppercase;
  --f7-tabbar-link-font-weight: 500;
  --f7-tabbar-link-letter-spacing: 0.05em;
  --f7-tabbar-label-font-size: 14px;
  --f7-tabbar-label-tablet-font-size: 14px;
  --f7-tabbar-label-font-weight: 400;
  --f7-tabbar-label-letter-spacing: 0;
  --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
}
.md .dark,
.md.dark {
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --f7-toolbar-height: 48px;
  --f7-toolbar-font-size: 16px;
  --f7-toolbar-inner-padding-left: 16px;
  --f7-toolbar-inner-padding-right: 16px;
  --f7-toolbar-link-height: auto;
  --f7-toolbar-link-line-height: inherit;
  --f7-tabbar-labels-height: 52px;
  --f7-tabbar-labels-tablet-height: 52px;
  /*
  --f7-tabbar-link-active-border-color: var(--f7-theme-color);
  */
  --f7-toolbar-top-shadow-image: none;
  --f7-toolbar-bottom-shadow-image: none;
  --f7-tabbar-icon-size: 24px;
  --f7-tabbar-link-text-transform: none;
  --f7-tabbar-link-font-weight: 500;
  --f7-tabbar-link-letter-spacing: 0;
  --f7-tabbar-label-font-size: 14px;
  --f7-tabbar-label-tablet-font-size: 14px;
  --f7-tabbar-label-font-weight: 500;
  --f7-tabbar-label-letter-spacing: 0;
  --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
}
.aurora .dark,
.aurora.dark {
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
}

Examples

Static Toolbar

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Static Toolbar</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
      </div>
      <div class="toolbar toolbar-bottom">
        <div class="toolbar-inner">
          <a class="link">Link 1</a>
          <a class="link">Link 2</a>
          <a class="link">Link 3</a>
        </div>
      </div>
    </div>
  </div>
</template>

Fixed Toolbar

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Fixed Toolbar</div>
      </div>
    </div>
    <div class="toolbar toolbar-bottom">
      <div class="toolbar-inner">
        <a class="link">Link 1</a>
        <a class="link">Link 2</a>
        <a class="link">Link 3</a>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
      </div>
    </div>
  </div>
</template>

Toolbar API

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Toolbar API</div>
      </div>
    </div>
    <div class="toolbar toolbar-bottom">
      <div class="toolbar-inner">
        <a class="link">Link 1</a>
        <a class="link">Link 2</a>
        <a class="link">Link 3</a>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p><a class="button button-fill" @click=${hideToolbar}>Hide Toolbar</a></p>
        <p><a class="button button-fill" @click=${showToolbar}>Show Toolbar</a></p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default (props, { $on, $f7 }) => {
    let toolbarEl;

    const hideToolbar = () => {
      $f7.toolbar.hide(toolbarEl)
    }

    const showToolbar = () => {
      $f7.toolbar.show(toolbarEl)
    }

    $on('pageInit', (e, page) => {
      toolbarEl = page.$el.find('.toolbar')[0];
    });

    return $render;
  }
</script>

Hide On Scroll

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Hide On Scroll</div>
      </div>
    </div>
    <div class="toolbar toolbar-bottom">
      <div class="toolbar-inner">
        <a class="link">Link 1</a>
        <a class="link">Link 2</a>
        <a class="link">Link 3</a>
      </div>
    </div>
    <div class="page-content hide-toolbar-on-scroll">
      <div class="block">
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
      </div>
    </div>
  </div>
</template>

Tabbar

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Tabbar</div>
      </div>
    </div>
    <div class="toolbar tabbar toolbar-bottom">
      <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 class="page-content tab tab-active" id="tab-1">
        <div class="block">
          <p><b>Tab 1 content</b></p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
            reprehenderit!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
            reprehenderit!</p>
        </div>
      </div>
      <div class="page-content tab" id="tab-2">
        <div class="block">
          <p><b>Tab 2 content</b></p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
            reprehenderit!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
            reprehenderit!</p>
        </div>
      </div>
      <div class="page-content tab" id="tab-3">
        <div class="block">
          <p><b>Tab 3 content</b></p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
            reprehenderit!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
            reprehenderit!</p>
        </div>
      </div>
    </div>
  </div>
</template>

Tabbar With Labels

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Tabbar With Labels</div>
        <div class="right">
          <a class="link" @click=${togglePosition}>
            <i class="md-only icon material-icons rotate-icon">compare_arrows</i>
            <i class="if-not-md icon f7-icons">arrow_up_arrow_down_circle_fill</i>
          </a>
        </div>
      </div>
    </div>
    <div class="toolbar tabbar-labels toolbar-bottom">
      <div class="toolbar-inner">
        <a href="#tab-1" class="tab-link tab-link-active">
          <i class="icon f7-icons if-not-md">envelope_fill</i>
          <i class="icon material-icons md-only">email</i>
          <span class="tabbar-label">Inbox</span>
        </a>
        <a href="#tab-2" class="tab-link">
          <i class="icon f7-icons if-not-md">today_fill<span class="badge color-red">5</span></i>
          <i class="icon material-icons md-only">today<span class="badge color-red">5</span></i>
          <span class="tabbar-label">Calendar</span>
        </a>
        <a href="#tab-3" class="tab-link">
          <i class="icon f7-icons if-not-md">cloud_upload_fill</i>
          <i class="icon material-icons md-only">file_upload</i>
          <span class="tabbar-label">Upload</span>
        </a>
      </div>
    </div>
    <div class="tabs">
      <div class="page-content tab tab-active" id="tab-1">
        <div class="block">
          <p><b>Tab 1 content</b></p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
            reprehenderit!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
            reprehenderit!</p>
        </div>
      </div>
      <div class="page-content tab" id="tab-2">
        <div class="block">
          <p><b>Tab 2 content</b></p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
            reprehenderit!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
            reprehenderit!</p>
        </div>
      </div>
      <div class="page-content tab" id="tab-3">
        <div class="block">
          <p><b>Tab 3 content</b></p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
            reprehenderit!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
            alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
            similique!</p>
          <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
            vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
          <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
            ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
          <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
            possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
            Sunt, ad aliquam!</p>
          <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
            consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
            reprehenderit!</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  .rotate-icon {
    transform: rotate(90deg);
  }
</style>
<script>
  export default (props, { $, $on }) => {
    let $toolbarEl;

    const togglePosition = () => {
      $toolbarEl.toggleClass('toolbar-bottom toolbar-top');
    }

    $on('pageInit', (e, page) => {
      $toolbarEl = page.$el.find('.toolbar');
    });

    return $render;
  }

</script>

Scrollable Tabbar

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Scrollable Tabbar</div>
      </div>
    </div>
    <div class="toolbar tabbar tabbar-scrollable toolbar-bottom">
      <div class="toolbar-inner">
        ${tabs.map((tab, index) => $h`
        <a href="#tab-${tab}" class="tab-link ${index === 0 ? 'tab-link-active' : ''}">Tab ${tab}</a>
        `)}
      </div>
    </div>
    <div class="tabs">
      ${tabs.map((tab, index) => $h`
      <div id="tab-${tab}" class="page-content tab ${index === 0 ? 'tab-active' : ''}">
        <div class="block">
          <p><b>Tab ${tab} content</b></p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque corrupti, quos asperiores unde aspernatur
            illum odio, eveniet. Fugiat magnam perspiciatis ex dignissimos, rerum modi ea nesciunt praesentium iusto
            optio rem?</p>
          <p>Illo debitis et recusandae, ipsum nisi nostrum vero delectus quasi. Quasi, consequatur! Corrupti, explicabo
            maxime incidunt fugit sint dicta saepe officiis sed expedita, minima porro! Ipsa dolores quia, delectus
            labore!</p>
          <p>At similique minima placeat magni molestias sunt deleniti repudiandae voluptatibus magnam quam esse
            reprehenderit dolor enim qui sed alias, laboriosam quaerat laborum iure repellat praesentium pariatur
            dolorum possimus veniam! Consectetur.</p>
          <p>Sunt, sed, magnam! Qui, suscipit. Beatae cum ullam necessitatibus eligendi, culpa rem excepturi consequatur
            quidem totam eum voluptates nihil, enim pariatur incidunt corporis sed facere magni earum tenetur rerum ea.
          </p>
          <p>Veniam nulla quis molestias voluptatem inventore consectetur iusto voluptatibus perferendis quisquam,
            cupiditate voluptates, tenetur vero magnam nisi animi praesentium atque adipisci optio quod aliquid vel
            delectus ad? Dicta deleniti, recusandae.</p>
        </div>
      </div>
      `)}
    </div>
  </div>
</template>
<script>
  export default () => {
    const tabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    return $render;
  }
</script>