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

    PropTypeDefaultDescription
    <Toolbar> properties
    innerbooleantrueWhen 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
    positionstringToolbar position, can be top or bottom
    topbooleanTop positioned toolbar. Shortening for position="top"
    topIosbooleanTop positioned toolbar only for iOS theme
    topMdbooleanTop positioned toolbar only for MD theme
    topAurorabooleanTop positioned toolbar only for Aurora theme
    bottombooleanBottom positioned toolbar. Shortening for position="bottom"
    bottomIosbooleanBottom positioned toolbar only for iOS theme
    bottomMdbooleanBottom positioned toolbar only for MD theme
    bottomAurorabooleanBottom positioned toolbar only for Aurora theme
    tabbarbooleanfalseDefines whether the Toolbar is also a Tabbar or not
    labelsbooleanfalseEnables Tabbar with labels (affects only when tabbar: true)
    scrollablebooleanfalseEnables scrollable Tabbar (affects only when tabbar: true)
    noShadowbooleanDisable shadow rendering for Material theme
    noHairlinebooleanfalseDisable toolbar/tabbar top thin border (hairline) for iOS theme
    hiddenbooleanfalseMakes 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="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

    export default class extends React.Component{
      constructor() {
        this.state = {
          isBottom: true,
        };
      }
      render() {
        return (
          <Page>
            <Navbar title="Toolbar" backLink="Back"></Navbar>
    
            <Toolbar position={this.state.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={() => 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: true,
        };
      }
      render() {
        return (
          <Page pageContent={false}>
            <Navbar title="Tabbar" backLink="Back">
              <NavRight>
                <Link iconIos="f7:reload" iconAurora="f7:reload" iconMd="material:compare_arrows" onClick={() => this.setState({isBottom: !this.state.isBottom})}></Link>
              </NavRight>
            </Navbar>
    
            <Toolbar tabbar position={this.state.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>
                  ...
                </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: true,
        };
      }
      render() {
        return (
          <Page pageContent={false}>
            <Navbar title="Tabbar Labels" backLink="Back">
              <NavRight>
                <Link iconIos="f7:reload" iconAurora="f7:reload" iconMd="material:compare_arrows" onClick={() => this.setState({isBottom: !this.state.isBottom})}></Link>
              </NavRight>
            </Navbar>
    
            <Toolbar tabbar labels position={this.state.isBottom ? 'bottom' : 'top'}>
              <Link tabLink="#tab-1" tabLinkActive text="Tab 1" iconIos="f7:email_fill" iconAurora="f7:email_fill" iconMd="material:email"></Link>
              <Link tabLink="#tab-2" text="Tab 2" iconIos="f7:today_fill" iconAurora="f7:today_fill" iconMd="material:today"></Link>
              <Link tabLink="#tab-3" text="Tab 3" iconIos="f7:cloud_fill" iconAurora="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: true,
        };
      }
      render() {
        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:reload" iconAurora="f7:reload" iconMd="material:compare_arrows" onClick={() => this.setState({isBottom: !this.state.isBottom})}></Link>
              </NavRight>
            </Navbar>
    
            <Toolbar tabbar scrollable position={this.state.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>
                    ...
                  </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>
    );