Toolbar / Tabbar

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

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 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 themes at the same time by using the following classes: toolbar-top-ios, toolbar-top-md, toolbar-bottom-ios, toolbar-bottom-md.

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-outline class to toolbar element:

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

Now let's look where we can place our Toolbar / Tabbar in DOM. There are several rules to place 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 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)

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)

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.

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

Parameter	Type	Default	Description
hideOnPageScroll	boolean	false	Will hide Toolbars/Tabbars on page scroll
showOnPageScrollEnd	boolean	true	Set to `true` to show hidden Toolbar/Tabbar when scrolling reaches end of the page
showOnPageScrollTop	boolean	true	Set 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 intended 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 Icons

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

<div class="toolbar tabbar tabbar-icons 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>

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 will fire the following DOM events on Toolbar element (<div class="toolbar">) and app events on app instance:

DOM Events

Event	Target	Description
toolbar:hide	Toolbar <div class="toolbar">	Event will be triggered when Toolbar becomes hidden
toolbar:show	Toolbar <div class="toolbar">	Event will be triggered when Toolbar becomes visible

App Events

Event	Arguments	Description
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-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-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-font-weight: 400;
  /*
  --f7-toolbar-link-height: var(--f7-toolbar-height);
  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
  --f7-tabbar-link-active-color: var(--f7-theme-color);
  */
  --f7-tabbar-icons-height: 50px;
  --f7-tabbar-icons-tablet-height: 50px;
  --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: 56px;
  --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-icons-height: 80px;
  --f7-tabbar-icons-tablet-height: 80px;
  --f7-tabbar-icon-size: 24px;
  --f7-tabbar-link-text-transform: none;
  --f7-tabbar-link-font-weight: 500;
  --f7-tabbar-link-letter-spacing: 0;
  --f7-toolbar-link-font-weight: 500;
  --f7-tabbar-label-font-size: 12px;
  --f7-tabbar-label-tablet-font-size: 12px;
  --f7-tabbar-label-font-weight: 500;
  --f7-tabbar-label-letter-spacing: 0;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-tabbar-link-active-color: var(--f7-md-on-secondary-container);
  --f7-tabbar-link-active-border-color: var(--f7-md-primary);
  --f7-tabbar-link-inactive-color: var(--f7-md-on-surface-variant);
  --f7-tabbar-link-active-icon-bg-color: var(--f7-md-secondary-container);
}

Examples

toolbar-tabbar-static.f7.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <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>

toolbar-tabbar-fixed.f7.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <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>

toolbar-tabbar-api.f7.html

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <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

toolbar-tabbar-hide-on-scroll.f7.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <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>

Tabbar

toolbar-tabbar-tabbar.f7.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <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>

Tabbar With Icons

toolbar-tabbar-tabbar-icons.f7.html

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Tabbar With Icons</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-icons 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

toolbar-tabbar-tabbar-scrollable.f7.html

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <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>

Toolbar / Tabbar

Toolbar HTML Layout

Toolbar Position

Theme-Specific Styling

Toolbar Type

Static Toolbar

Fixed Toolbar

Common Toolbar

Toolbar App Methods

Toolbar App Parameters

Tabbar

Tabbar Layout

Tabbar With Icons

Scrollable Tabbar

Control Toolbar/Tabbar With Page Classes

Toolbar Events

DOM Events

App Events

CSS Variables

Examples

Static Toolbar

Fixed Toolbar

Toolbar API

Hide On Scroll

Tabbar

Tabbar With Icons

Scrollable Tabbar