Toolbar React Component

Toolbar is a fixed (with Fixed and Through layout types) area at the bottom of a screen that contains navigation elements. Toolbar does not have any parts, just plain links inside

Toolbar React component represents Toolbar component.

Toolbar Components

There are following components included:

Toolbar

Toolbar Properties

Prop	Type	Default	Description
<Toolbar> properties
inner	boolean	true	When enabled (by default), it will put all the content within internal `toolbarInner` element. Disable it only in case you want to put totally custom layout inside
position	string		Toolbar position, can be `top` or `bottom`
top	boolean		Top positioned toolbar. Shortening for `position="top"`
topIos	boolean		Top positioned toolbar only for iOS theme
topMd	boolean		Top positioned toolbar only for MD theme
topAurora	boolean		Top positioned toolbar only for Aurora theme
bottom	boolean		Bottom positioned toolbar. Shortening for `position="bottom"`
bottomIos	boolean		Bottom positioned toolbar only for iOS theme
bottomMd	boolean		Bottom positioned toolbar only for MD theme
bottomAurora	boolean		Bottom positioned toolbar only for Aurora theme
tabbar	boolean	false	Defines whether the Toolbar is also a Tabbar or not
labels	boolean	false	Enables Tabbar with labels (affects only when `tabbar: true`)
scrollable	boolean	false	Enables scrollable Tabbar (affects only when `tabbar: true`)
noShadow	boolean		Disable shadow rendering for Material theme
noHairline	boolean	false	Disable toolbar/tabbar top thin border (hairline) for iOS theme
hidden	boolean	false	Makes toolbar hidden

Toolbar Methods

<Toolbar> methods
.hide(animate)	Hide toolbar
.show(animate)	Show toolbar

Toolbar Events

Event	Description
<Toolbar> events
toolbarHide	Event will be triggered when Toolbar becomes hidden
toolbarShow	Event will be triggered when Toolbar becomes visible

Toolbar Slots

Toolbar React component (<Toolbar>) has additional slots for custom elements:

default - element will be inserted as a child of <div class="toolbarInner"> element
beforeInner - element will be inserted right before <div class="toolbarInner"> element
afterInner - element will be inserted right after <div class="toolbarInner"> element

<Toolbar>
  <div slot="beforeInner">Before Inner</div>
  <div slot="afterInner">After Inner</div>
  {/* Goes to default slot: */}
  <Link>Left Link</Link>
  <Link>Right Link</Link>
</Toolbar>

{/* Renders to: */}

<div class="toolbar">
  <div>Before Inner</div>
  <div class="toolbarInner">
    <a href="#" class="link">Left Link</a>
    <a href="#" class="link">Right Link</a>
  </div>
  <div>After Inner</div>
</div>

Examples

Toolbar

import React, { useState } from 'react';
import { Page, Navbar, Toolbar, Link, BlockTitle, Block, Button } from 'framework7-react';

export default () => {
  const [isBottom, setIsBottom] = useState(true);

  return (
    <Page>
  <Navbar title="Toolbar" backLink="Back"></Navbar>

  <Toolbar position={isBottom ? 'bottom' : 'top'}>
    <Link>Left Link</Link>
    <Link>Right Link</Link>
  </Toolbar>

  <BlockTitle>Toolbar Position</BlockTitle>

  <Block>
    <p>
      Toolbar supports both top and bottom positions. Click the following button to change its
      position.
    </p>
    <p>
      <Button raised onClick={() => setIsBottom(!isBottom)}>
        Toggle Toolbar Position
      </Button>
    </p>
  </Block>

  <Block>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
      facilis laudantium voluptates obcaecati officia cum, sit libero commodi...
    </p>
  </Block>
    </Page>
  );
};

Tabbar

import React, { useState } from 'react';
import { Page, Navbar, Toolbar, Link, Block, NavRight, Tabs, Tab } from 'framework7-react';

export default () => {
  const [isBottom, setIsBottom] = useState(true);
  return (
    <Page pageContent={false}>
  <Navbar title="Tabbar" backLink="Back">
    <NavRight>
      <Link
        iconIos="f7:arrow_up_arrow_down_circle_fill"
        iconAurora="f7:arrow_up_arrow_down_circle_fill"
        iconMd="material:compare_arrows"
        onClick={() => setIsBottom(!isBottom)}
      ></Link>
    </NavRight>
  </Navbar>

  <Toolbar tabbar position={isBottom ? 'bottom' : 'top'}>
    <Link tabLink="#tab-1" tabLinkActive>
      Tab 1
    </Link>
    <Link tabLink="#tab-2">Tab 2</Link>
    <Link tabLink="#tab-3">Tab 3</Link>
  </Toolbar>

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

Tabbar Labels

import React, { useState } from 'react';
import { Page, Navbar, Toolbar, Link, Block, NavRight, Tabs, Tab } from 'framework7-react';

export default () => {
  const [isBottom, setIsBottom] = useState(true);
  return (
    <Page pageContent={false}>
  <Navbar title="Tabbar Labels" backLink="Back">
    <NavRight>
      <Link
        iconIos="f7:arrow_up_arrow_down_circle_fill"
        iconAurora="f7:arrow_up_arrow_down_circle_fill"
        iconMd="material:compare_arrows"
        onClick={() => setIsBottom(!isBottom)}
      ></Link>
    </NavRight>
  </Navbar>

  <Toolbar tabbar labels position={isBottom ? 'bottom' : 'top'}>
    <Link
      tabLink="#tab-1"
      tabLinkActive
      text="Tab 1"
      iconIos="f7:envelope_fill"
      iconAurora="f7:envelope_fill"
      iconMd="material:email"
    ></Link>
    <Link
      tabLink="#tab-2"
      text="Tab 2"
      iconIos="f7:calendar_fill"
      iconAurora="f7:calendar_fill"
      iconMd="material:today"
    ></Link>
    <Link
      tabLink="#tab-3"
      text="Tab 3"
      iconIos="f7:cloud_upload_fill"
      iconAurora="f7:cloud_upload_fill"
      iconMd="material:file_upload"
    ></Link>
  </Toolbar>

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

Tabbar Scrollable

import React, { useState } from 'react';
import { Page, Navbar, Toolbar, Link, Block, NavRight, Tabs, Tab } from 'framework7-react';

export default () => {
  const [isBottom, setIsBottom] = useState(true);
  const tabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  return (
    <Page pageContent={false}>
  <Navbar title="Tabbar Scrollable" backLink="Back">
    <NavRight>
      <Link
        iconIos="f7:arrow_up_arrow_down_circle_fill"
        iconAurora="f7:arrow_up_arrow_down_circle_fill"
        iconMd="material:compare_arrows"
        onClick={() => setIsBottom(!isBottom)}
      ></Link>
    </NavRight>
  </Navbar>

  <Toolbar tabbar scrollable position={isBottom ? 'bottom' : 'top'}>
    {tabs.map((tab, index) => (
      <Link key={tab} tabLink={`#tab-${tab}`} tabLinkActive={index === 0}>
        Tab {tab}
      </Link>
    ))}
  </Toolbar>

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

Hide Toolbar On Scroll

import React from 'react';
import { Page, Navbar, Toolbar, Link, Block } from 'framework7-react';

export default () => {
  return (
    <Page hideToolbarOnScroll>
  <Navbar title="Hide Toolbar On Scroll" backLink="Back"></Navbar>

  <Toolbar bottom>
    <Link>Left Link</Link>
    <Link>Right Link</Link>
  </Toolbar>

  <Block strong>
    <p>Toolbar will be hidden if you scroll bottom</p>
  </Block>
  <Block>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
      facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
      suscipit temporibus sequi iure ad laboriosam accusamus?
    </p>
    <p>
      Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
      blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
      sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.
    </p>
    <p>
      Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est
      animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
      delectus a maiores nihil dolores? Natus, perferendis.
    </p>
    <p>
      Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis
      quae provident consequatur minima doloremque blanditiis nihil maxime ducimus earum autem.
      Magni animi blanditiis similique iusto, repellat sed quisquam!
    </p>
    <p>
      Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
      ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
      explicabo, unde aliquid impedit! Adipisci!
    </p>
    <p>
      Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat
      iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium,
      officiis veniam nostrum cum cumque impedit.
    </p>
    <p>
      Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium
      rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi
      quaerat ea soluta doloremque. Iure fugit, minima facere.
    </p>
  </Block>
    </Page>
  );
};