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.

Usage examples

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

Renders to:

<div class="toolbar">
  <div class="toolbar-inner">
    <a href="#" class="link">Left Link</a>
    <a href="#" class="link">Right Link</a>
  </div>
</div>

Bottom Toolbar (Affects Material Theme only)

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

Renders to:

<div class="toolbar toolbar-bottom">
  <div class="toolbar-inner">
    <a href="#" class="link">Left Link</a>
    <a href="#" class="link">Right Link</a>
  </div>
</div>

Tabbar

<Toolbar tabbar>
  <Link tabLink="#tab1">Tab 1</Link>
  <Link tabLink="#tab2">Tab 2</Link>
</Toolbar>

Renders to:

<div class="toolbar tabbar">
  <div class="toolbar-inner">
    <a href="#" class="tab-link" data-tab="#tab1">Tab 1</a>
    <a href="#" class="tab-link" data-tab="#tab2">Tab 2</a>
  </div>
</div>

Tabbar With Labels

<Toolbar tabbar labels>
  <Link icon="icon-1" text="Tab 1" tabLink="#tab1"></Link>
  <Link icon="icon-2" text="Tab 2" tabLink="#tab2"></Link>
</Toolbar>

Renders to:

<div class="toolbar tabbar tabbar-labels">
  <div class="toolbar-inner">
    <a href="#" class="tab-link" data-tab="#tab1">
      <i class="icon icon-1"></i>
      <span class="tabbar-label">Tab 1</span>
    </a>
    <a href="#" class="tab-link" data-tab="#tab1">
      <i class="icon icon-2"></i>
      <span class="tabbar-label">Tab 2</span>
    </a>
  </div>
</div>

Scrollable Tabbar

<Toolbar tabbar scrollable>
  <Link tabLink="#tab1">Tab 1</Link>
  <Link tabLink="#tab2">Tab 2</Link>
</Toolbar>

Renders to:

<div class="toolbar tabbar tabbar-scrollable">
  <div class="toolbar-inner">
    <a href="#" class="tab-link" data-tab="#tab1">Tab 1</a>
    <a href="#" class="tab-link" data-tab="#tab2">Tab 2</a>
  </div>
</div>

Slot Properties

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

  • beforeInnerSlot - element will be inserted right before <div class="toolbar-inner"> element
  • afterInnerSlot - element will be inserted right after <div class="toolbar-inner"> element
<Toolbar
  beforeInnerSlot={<div>Before Inner</div>}
  afterInnerSlot={<div>After Inner</div>}
> 
  <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>

Properties

Prop Type Description
bottom boolean Defines whether the Toolbar should be on bottom or not (Material theme only)
tabbar boolean Defines whether the Toolbar is also a Tab Bar
labels boolean Enables Tab Bar with labels (affects only when tabbar: true)
scrollable boolean Enables scrollable Tab Bar (affects only when tabbar: true)
theme string Toolbar theme color. One of default colors
layout string Toolbar layout theme. One of default layout themes