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.

There are following components included:

Toolbar

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
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
tabbar	boolean	false	Defines whether the Toolbar is also a Tabbar or not
icons	boolean	false	Enables Tabbar with icons (affects only when `tabbar: true`)
scrollable	boolean	false	Enables scrollable Tabbar (affects only when `tabbar: true`)
outline	boolean	true	Adds toolbar/tabbar top thin border (hairline) for iOS theme
hidden	boolean	false	Makes toolbar hidden

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

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

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-tabbar.jsx

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

export default () => {
  const [toolbarPosition, setToolbarPosition] = useState('bottom');

  const toggleToolbarPosition = () => {
    setToolbarPosition(toolbarPosition === 'top' ? 'bottom' : 'top');
  };

  return (
    <Page>
      <Navbar title="Toolbar & Tabbar"></Navbar>
      <Toolbar position={toolbarPosition}>
        <Link>Left Link</Link>
        <Link>Right Link</Link>
      </Toolbar>
      {/* example-hidden-start */}
      <List insetMd strong dividersIos outlineIos className="example-hidden">
        <ListItem link="./tabbar/" title="Tabbar" />
        <ListItem link="./tabbar-icons/" title="Tabbar With Icons" />
        <ListItem link="./tabbar-scrollable/" title="Tabbar Scrollable" />
        <ListItem link="./toolbar-hide-scroll/" title="Hide Toolbar On Scroll" />
      </List>
      {/* example-hidden-end */}
      <BlockTitle>Toolbar Position</BlockTitle>
      <Block>
        <p>
          Toolbar supports both top and bottom positions. Click the following button to change its
          position.
        </p>
        <p>
          <Button
            fill
            onClick={() => {
              toggleToolbarPosition();
            }}
          >
            Toggle Toolbar Position
          </Button>
        </p>
      </Block>
    </Page>
  );
};

Tabbar

tabbar.jsx

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

export default () => {
  const [toolbarPosition, setToolbarPosition] = useState('bottom');

  const toggleToolbarPosition = () => {
    setToolbarPosition(toolbarPosition === 'top' ? 'bottom' : 'top');
  };

  return (
    <Page pageContent={false}>
      <Navbar title="Tabbar">
        <NavRight>
          <Link
            iconMd="material:compare_arrows"
            iconIos="f7:arrow_up_arrow_down_circle_fill"
            onClick={() => {
              toggleToolbarPosition();
            }}
          ></Link>
        </NavRight>
      </Navbar>
      <Toolbar tabbar position={toolbarPosition}>
        <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 Icons

tabbar-icons.jsx

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

export default () => {
  const [toolbarPosition, setToolbarPosition] = useState('bottom');

  const toggleToolbarPosition = () => {
    setToolbarPosition(toolbarPosition === 'top' ? 'bottom' : 'top');
  };

  return (
    <Page pageContent={false}>
      <Navbar title="Tabbar Icons">
        <NavRight>
          <Link
            iconMd="material:compare_arrows"
            iconIos="f7:arrow_up_arrow_down_circle_fill"
            onClick={() => {
              toggleToolbarPosition();
            }}
          />
        </NavRight>
      </Navbar>
      <Toolbar tabbar icons position={toolbarPosition}>
        <Link
          tabLink="#tab-1"
          tabLinkActive
          text="Tab 1"
          iconIos="f7:envelope_fill"
          iconMd="material:email"
        />
        <Link tabLink="#tab-2" text="Tab 2" iconIos="f7:calendar_fill" iconMd="material:today" />
        <Link
          tabLink="#tab-3"
          text="Tab 3"
          iconIos="f7:cloud_upload_fill"
          iconMd="material:file_upload"
        />
      </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

tabbar-scrollable.jsx

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

export default () => {
  const [toolbarPosition, setToolbarPosition] = useState('bottom');

  const toggleToolbarPosition = () => {
    setToolbarPosition(toolbarPosition === 'top' ? 'bottom' : 'top');
  };

  const tabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  return (
    <Page pageContent={false}>
      <Navbar title="Tabbar Scrollable">
        <NavRight>
          <Link
            iconMd="material:compare_arrows"
            iconIos="f7:arrow_up_arrow_down_circle_fill"
            onClick={() => {
              toggleToolbarPosition();
            }}
          ></Link>
        </NavRight>
      </Navbar>
      <Toolbar tabbar scrollable position={toolbarPosition}>
        {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. 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>
            </Block>
          </Tab>
        ))}
      </Tabs>
    </Page>
  );
};

toolbar-hide-scroll.jsx

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

export default () => (
  <Page hideToolbarOnScroll>
    <Navbar title="Hide Toolbar On Scroll"></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. Quos maxime incidunt id ab culpa
        ipsa omnis eos, vel excepturi officiis neque illum perferendis dolorum magnam rerum natus
        dolore nulla ex.
      </p>
      <p>
        Eum dolore, amet enim quaerat omnis. Modi minus voluptatum quam veritatis assumenda,
        eligendi minima dolore in autem delectus sequi accusantium? Cupiditate praesentium autem
        eius, esse ratione consequuntur dolor minus error.
      </p>
      <p>
        Repellendus ipsa sint quisquam delectus dolore quidem odio, praesentium, sequi temporibus
        amet architecto? Commodi molestiae, in repellat fugit! Laudantium, fuga quia officiis error.
        Provident inventore iusto quas iure, expedita optio.
      </p>
      <p>
        Eligendi recusandae eos sed alias delectus reprehenderit quaerat modi dolor commodi beatae
        temporibus nisi ullam ut, quae, animi esse in officia nesciunt sequi amet repellendus?
        Maiores quos provident nisi expedita.
      </p>
      <p>
        Dolorem aspernatur repudiandae aperiam autem excepturi inventore explicabo molestiae atque,
        architecto consequatur ab quia quaerat deleniti quis ipsum alias itaque veritatis maiores
        consectetur minima facilis amet. Maiores impedit ipsum sint.
      </p>
      <p>
        Consequuntur minus fugit vitae magnam illo quibusdam. Minima rerum, magnam nostrum id error
        temporibus odio molestias tempore vero, voluptas quam iusto. In laboriosam blanditiis,
        ratione consequuntur similique, quos repellendus ex!
      </p>
      <p>
        Error suscipit odio modi blanditiis voluptatibus tempore minima ipsam accusantium id! Minus,
        ea totam veniam dolorem aspernatur repudiandae quae similique odio dolor, voluptate quis aut
        tenetur porro culpa odit aliquid.
      </p>
      <p>
        Aperiam velit sed sit quaerat, expedita tempore aspernatur iusto nobis ipsam error ut
        sapiente delectus in minima recusandae dolore alias, cumque labore. Doloribus veritatis
        magni nisi odio voluptatum perferendis placeat!
      </p>
      <p>
        Eaque laboriosam iusto corporis iure nemo ab deleniti ut facere laborum, blanditiis neque
        nihil dignissimos fuga praesentium illo facilis eos beatae accusamus cumque molestiae
        asperiores cupiditate? Provident laborum officiis suscipit!
      </p>
      <p>
        Exercitationem odio nulla rerum soluta aspernatur fugit, illo iusto ullam similique.
        Recusandae consectetur rem, odio autem voluptate similique atque, alias possimus quis vitae
        in, officiis labore deserunt aspernatur rerum sunt?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos maxime incidunt id ab culpa
        ipsa omnis eos, vel excepturi officiis neque illum perferendis dolorum magnam rerum natus
        dolore nulla ex.
      </p>
      <p>
        Eum dolore, amet enim quaerat omnis. Modi minus voluptatum quam veritatis assumenda,
        eligendi minima dolore in autem delectus sequi accusantium? Cupiditate praesentium autem
        eius, esse ratione consequuntur dolor minus error.
      </p>
      <p>
        Repellendus ipsa sint quisquam delectus dolore quidem odio, praesentium, sequi temporibus
        amet architecto? Commodi molestiae, in repellat fugit! Laudantium, fuga quia officiis error.
        Provident inventore iusto quas iure, expedita optio.
      </p>
      <p>
        Eligendi recusandae eos sed alias delectus reprehenderit quaerat modi dolor commodi beatae
        temporibus nisi ullam ut, quae, animi esse in officia nesciunt sequi amet repellendus?
        Maiores quos provident nisi expedita.
      </p>
      <p>
        Dolorem aspernatur repudiandae aperiam autem excepturi inventore explicabo molestiae atque,
        architecto consequatur ab quia quaerat deleniti quis ipsum alias itaque veritatis maiores
        consectetur minima facilis amet. Maiores impedit ipsum sint.
      </p>
      <p>
        Consequuntur minus fugit vitae magnam illo quibusdam. Minima rerum, magnam nostrum id error
        temporibus odio molestias tempore vero, voluptas quam iusto. In laboriosam blanditiis,
        ratione consequuntur similique, quos repellendus ex!
      </p>
      <p>
        Error suscipit odio modi blanditiis voluptatibus tempore minima ipsam accusantium id! Minus,
        ea totam veniam dolorem aspernatur repudiandae quae similique odio dolor, voluptate quis aut
        tenetur porro culpa odit aliquid.
      </p>
      <p>
        Aperiam velit sed sit quaerat, expedita tempore aspernatur iusto nobis ipsam error ut
        sapiente delectus in minima recusandae dolore alias, cumque labore. Doloribus veritatis
        magni nisi odio voluptatum perferendis placeat!
      </p>
      <p>
        Eaque laboriosam iusto corporis iure nemo ab deleniti ut facere laborum, blanditiis neque
        nihil dignissimos fuga praesentium illo facilis eos beatae accusamus cumque molestiae
        asperiores cupiditate? Provident laborum officiis suscipit!
      </p>
      <p>
        Exercitationem odio nulla rerum soluta aspernatur fugit, illo iusto ullam similique.
        Recusandae consectetur rem, odio autem voluptate similique atque, alias possimus quis vitae
        in, officiis labore deserunt aspernatur rerum sunt?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos maxime incidunt id ab culpa
        ipsa omnis eos, vel excepturi officiis neque illum perferendis dolorum magnam rerum natus
        dolore nulla ex.
      </p>
      <p>
        Eum dolore, amet enim quaerat omnis. Modi minus voluptatum quam veritatis assumenda,
        eligendi minima dolore in autem delectus sequi accusantium? Cupiditate praesentium autem
        eius, esse ratione consequuntur dolor minus error.
      </p>
      <p>
        Repellendus ipsa sint quisquam delectus dolore quidem odio, praesentium, sequi temporibus
        amet architecto? Commodi molestiae, in repellat fugit! Laudantium, fuga quia officiis error.
        Provident inventore iusto quas iure, expedita optio.
      </p>
      <p>
        Eligendi recusandae eos sed alias delectus reprehenderit quaerat modi dolor commodi beatae
        temporibus nisi ullam ut, quae, animi esse in officia nesciunt sequi amet repellendus?
        Maiores quos provident nisi expedita.
      </p>
      <p>
        Dolorem aspernatur repudiandae aperiam autem excepturi inventore explicabo molestiae atque,
        architecto consequatur ab quia quaerat deleniti quis ipsum alias itaque veritatis maiores
        consectetur minima facilis amet. Maiores impedit ipsum sint.
      </p>
      <p>
        Consequuntur minus fugit vitae magnam illo quibusdam. Minima rerum, magnam nostrum id error
        temporibus odio molestias tempore vero, voluptas quam iusto. In laboriosam blanditiis,
        ratione consequuntur similique, quos repellendus ex!
      </p>
      <p>
        Error suscipit odio modi blanditiis voluptatibus tempore minima ipsam accusantium id! Minus,
        ea totam veniam dolorem aspernatur repudiandae quae similique odio dolor, voluptate quis aut
        tenetur porro culpa odit aliquid.
      </p>
      <p>
        Aperiam velit sed sit quaerat, expedita tempore aspernatur iusto nobis ipsam error ut
        sapiente delectus in minima recusandae dolore alias, cumque labore. Doloribus veritatis
        magni nisi odio voluptatum perferendis placeat!
      </p>
      <p>
        Eaque laboriosam iusto corporis iure nemo ab deleniti ut facere laborum, blanditiis neque
        nihil dignissimos fuga praesentium illo facilis eos beatae accusamus cumque molestiae
        asperiores cupiditate? Provident laborum officiis suscipit!
      </p>
      <p>
        Exercitationem odio nulla rerum soluta aspernatur fugit, illo iusto ullam similique.
        Recusandae consectetur rem, odio autem voluptate similique atque, alias possimus quis vitae
        in, officiis labore deserunt aspernatur rerum sunt?
      </p>
    </Block>
  </Page>
);

Improve this Doc

On this page

Toolbar Components
Toolbar Properties
Toolbar Methods
Toolbar Events
Toolbar Slots
Examples

Toolbar
Tabbar
Tabbar Icons
Tabbar Scrollable
Hide Toolbar On Scroll

Toolbar React Component

Toolbar Components

Toolbar Properties

Toolbar Methods

Toolbar Events

Toolbar Slots

Examples

Toolbar

Tabbar

Tabbar Icons

Tabbar Scrollable

Hide Toolbar On Scroll