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 / F7Toolbar

    Toolbar Properties

    Prop Type Default Description
    <Toolbar> properties
    inner boolean true When enabled (by default), it will put all the content within internal `toolbar-inner` element. Disable it only in case you want to put totally custom layout inside
    bottomMd boolean false Defines whether the Toolbar should be on bottom or not (MD theme only)
    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 Slots

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

    • default - element will be inserted as a child of <div class="toolbar-inner"> element
    • before-inner - element will be inserted right before <div class="toolbar-inner"> element
    • after-inner - element will be inserted right after <div class="toolbar-inner"> element
    <Toolbar>
      <div slot="before-inner">Before Inner</div>
      <div slot="after-inner">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="toolbar-inner">
        <a href="#" class="link">Left Link</a>
        <a href="#" class="link">Right Link</a>
      </div>
      <div>After Inner</div>
    </div>
    

    Examples

    Toolbar

    export default class extends React.Component{
      constructor() {
        this.state = {
          isBottom: false,
        };
      }
      render() {
        return (
          <Page>
            <Navbar title="Toolbar" backLink="Back"></Navbar>
    
            <Toolbar bottomMd={this.state.isBottom}>
              <Link>Left Link</Link>
              <Link>Right Link</Link>
            </Toolbar>
    
            {this.$theme.md && (
              <BlockTitle>Toolbar Position</BlockTitle>
            )}
            {this.$theme.md && (
              <Block>
                <p>Material (MD) theme toolbar supports both top and bottom positions. Click the following button to change its position.</p>
                <p>
                  <Button raised onClick={() => this.setState({isBottom: !this.state.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

    export default class extends React.Component{
      constructor() {
        this.state = {
          isBottom: false,
        };
      }
      render() {
        return (
          <Page pageContent={false}>
            <Navbar title="Tabbar" backLink="Back">
              {this.$theme.md && (
                <NavRight>
                  <Link iconMaterial="compare_arrows" onClick={() => this.setState({isBottom: !this.state.isBottom})}></Link>
                </NavRight>
              )}
            </Navbar>
    
            <Toolbar tabbar bottomMd={this.state.isBottom}>
              <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>
                  ...
                </Block>
              </Tab>
              <Tab id="tab-2" className="page-content">
                <Block>
                  <p>Tab 2 content</p>
                  ...
                </Block>
              </Tab>
              <Tab id="tab-3" className="page-content">
                <Block>
                  <p>Tab 3 content</p>
                  ...
                </Block>
              </Tab>
            </Tabs>
          </Page>
        )
      }
    

    Tabbar Labels

    export default class extends React.Component{
      constructor() {
        this.state = {
          isBottom: false,
        };
      }
      render() {
        return (
          <Page pageContent={false}>
            <Navbar title="Tabbar Labels" backLink="Back">
              {this.$theme.md && (
                <NavRight>
                  <Link iconMaterial="compare_arrows" onClick={() => this.setState({isBottom: !this.state.isBottom})}></Link>
                </NavRight>
              )}
            </Navbar>
    
            <Toolbar tabbar labels bottomMd={this.state.isBottom}>
              <Link tabLink="#tab-1" tabLinkActive text="Tab 1" iconIos="f7:email_fill" iconMd="material:email"></Link>
              <Link tabLink="#tab-2" text="Tab 2" iconIos="f7:today_fill" iconMd="material:today"></Link>
              <Link tabLink="#tab-3" text="Tab 3" iconIos="f7:cloud_fill" iconMd="material:file_upload"></Link>
            </Toolbar>
    
            <Tabs>
              <Tab id="tab-1" className="page-content" tabActive>
                <Block>
                  <p>Tab 1 content</p>
                  ...
                </Block>
              </Tab>
              <Tab id="tab-2" className="page-content">
                <Block>
                  <p>Tab 2 content</p>
                  ...
                </Block>
              </Tab>
              <Tab id="tab-3" className="page-content">
                <Block>
                  <p>Tab 3 content</p>
                  ...
                </Block>
              </Tab>
            </Tabs>
          </Page>
        )
      }
    }
    

    Tabbar Scrollable

    export default class extends React.Component{
      constructor() {
        this.state = {
          isBottom: false,
        };
      }
      render() {
        const tabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        return (
          <Page pageContent={false}>
            <Navbar title="Tabbar Scrollable" backLink="Back">
              {this.$theme.md && (
                <NavRight>
                  <Link iconMaterial="compare_arrows" onClick={() => this.setState({isBottom: !this.state.isBottom})}></Link>
                </NavRight>
              )}
            </Navbar>
    
            <Toolbar tabbar scrollable bottomMd={this.state.isBottom}>
              {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>
                    ...
                  </Block>
                </Tab>
              ))}
            </Tabs>
          </Page>
        )
      }
    }
    

    Hide Toolbar On Scroll

    export default () => (
      <Page hideToolbarOnScroll>
        <Navbar title="Hide Toolbar On Scroll" backLink="Back"></Navbar>
    
        <Toolbar bottom-md>
          <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>
          ...
        </Block>
      </Page>
    );