Toolbar React Component

Toolbar is a fixed area at the bottom (or top) of a screen that contains navigation elements. Toolbar does not have any parts, just plain links inside

Toolbar Components

There are following components included:

  • Toolbar

Toolbar Props

NameTypeDefaultDescription
bgClassNamestring

Additional class to add on Toolbar's "background" element

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-bars-ios-light dark:bg-bars-ios-dark'

Toolbar bg color in iOS theme

colors.bgMaterialstring'bg-bars-material-light dark:bg-bars-material-dark'

Toolbar bg color in iOS theme

componentstring'div'

Component's HTML Element

hairlinesbooleantrue

Renders outer hairlines (borders) on iOS theme

innerClassNamestring

Additional class to add on Toolbar's "inner" element

tabbarbooleanfalse

Enables tabbar, same as using <Tabbar> component

tabbarLabelsbooleanfalse

Enables tabbar with labels, same as using <Tabbar labels> component

topbooleanfalse

Enables top toolbar, in this case it renders border on shadows on opposite sides

translucentbooleantrue

Makes Toolbar background translucent (with backdrop-filter: blur) in iOS theme

Examples

Toolbar.jsx
import React, { useState } from 'react';
import {
Page,
Navbar,
NavbarBackLink,
Toolbar,
Link,
Block,
Button,
} from 'tailwind-mobile/react';
export default function ToolbarPage() {
const [isTop, setIsTop] = useState(false);
return (
<Page>
<Navbar
title="Toolbar"
/>
<Toolbar
top={isTop}
className={`left-0 ${
isTop
? 'ios:top-11-safe material:top-14-safe sticky'
: 'bottom-0 fixed'
} w-full`}
>
<Link toolbar>Link 1</Link>
<Link toolbar>Link 2</Link>
<Link toolbar>Link 3</Link>
</Toolbar>
<Block strong className="space-y-4">
<p>
Toolbar supports both top and bottom positions. Click the following
button to change its position.
</p>
<p>
<Button
onClick={() => {
setIsTop(!isTop);
}}
>
Toggle Toolbar Position
</Button>
</p>
</Block>
</Page>
);
}
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.