Toolbar / Tabbar

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:

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 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 scoll 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="content-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>

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-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: 56px;
  --f7-tabbar-link-inactive-color: #929292;
  --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: 10px;
  --f7-tabbar-label-tablet-font-size: 14px;
  --f7-tabbar-label-font-weight: 400;
  --f7-tabbar-label-letter-spacing: 0.01;
}
.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-inactive-color: rgba(0, 0, 0, 0.54);
  /*
  --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.03em;
  --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;
}
.md .theme-dark,
.md.theme-dark {
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --f7-toolbar-height: 38px;
  --f7-toolbar-font-size: 14px;
  --f7-toolbar-inner-padding-left: 15px;
  --f7-toolbar-inner-padding-right: 15px;
  --f7-toolbar-link-height: auto;
  --f7-toolbar-link-line-height: inherit;
  --f7-tabbar-labels-height: 44px;
  --f7-tabbar-labels-tablet-height: 44px;
  --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
  --f7-tabbar-link-inactive-bg-color: rgba(0, 0, 0, 0.2);
  --f7-toolbar-top-shadow-image: none;
  --f7-toolbar-bottom-shadow-image: none;
  --f7-tabbar-icon-size: 18px;
  --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: 12px;
  --f7-tabbar-label-font-weight: 500;
  --f7-tabbar-label-letter-spacing: 0.01;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
}

Examples

Static Toolbar

<div class="page">
  <div class="navbar">
    ...
  </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>
      ...
    </div>
    <!-- Static Toolbar -->
    <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>

Fixed Toolbar

<div class="page">
  <div class="navbar">
    ...
  </div>
  <!-- Fixed Toolbar -->
  <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>
      ...
    </div>
  </div>
</div>

Toolbar API

<div class="page">
  <div class="navbar">
    ...
  </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-raised hide-toolbar">Hide Toolbar</a></p>
      <p><a class="button button-raised show-toolbar">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>
      ....
    </div>
  </div>
</div>

var app = new Framework7();
var $$ = Dom7;
$$('.hide-toolbar').on('click', function () {
  app.toolbar.hide('.toolbar');
});
$$('.show-toolbar').on('click', function () {
  app.toolbar.show('.toolbar');
});

Hide On Scroll

<div class="page">
  <div class="navbar">
    ...
  </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>
  <!-- Additional "hide-toolbar-on-scroll" class to hide toolbar on scroll automatically -->
  <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>
      ...
    </div>
  </div>
</div>

Tabbar

<div class="page">
  <div class="navbar">
    ...
  </div>
  <!-- Additional "tabbar" class -->
  <div class="toolbar tabbar toolbar-bottom">
    <div class="toolbar-inner">
      <!-- Links have "tab-link" class instead of just "link" to switch tabs -->
      <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>
  <!-- Tabs -->
  <div class="tabs">
    <!-- First tab, active -->
    <div class="page-content tab tab-active" id="tab-1">
      <div class="block">
        <p><b>Tab 1 content</b></p>
        ...
      </div>
    </div>
    <!-- Second tab -->
    <div class="page-content tab" id="tab-2">
      <div class="block">
        <p><b>Tab 2 content</b></p>
        ...
      </div>
    </div>
    <!-- Third tab -->
    <div class="page-content tab" id="tab-3">
      <div class="block">
        <p><b>Tab 3 content</b></p>
        ...
      </div>
    </div>
  </div>
</div>

Tabbar With Labels

<div class="page">
  <div class="navbar">
      ...
  </div>
  <!-- Additional "tabbar-labels" class -->
  <div class="toolbar tabbar tabbar-labels toolbar-bottom">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link tab-link-active">
        <!-- Different icons for iOS and MD themes -->
        <i class="icon f7-icons if-not-md">email_fill</i>
        <i class="icon material-icons md-only">email</i>
        <!-- Label text -->
        <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_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>
</div>

Scrollable Tabbar

<div class="page">
  <div class="navbar">
    ...
  </div>
  <!-- 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-10" class="tab-link">Tab 10</a>
    </div>
  </div>
  <div class="tabs">
    <div id="tab-1" class="page-content tab tab-active"> ... </div>
    <div id="tab-2" class="page-content tab"> ... </div>
    ...
    <div id="tab-10" class="page-content tab"> ... </div>
  </div>
</div>