🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

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-ios-light-surface-2 dark:bg-ios-dark-surface-2'
colors.bgMaterialstring'bg-md-light-surface-2 dark:bg-md-dark-surface-2'
colors.tabbarHighlightBgIosstring'bg-primary'
colors.tabbarHighlightBgMaterialstring'bg-md-light-primary dark:bg-md-dark-primary'
componentstring'div'

Component's HTML Element

innerClassNamestring

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

outlinebooleanundefined

Renders outer hairlines (borders). If not specified, will be enabled for iOS theme

tabbarbooleanfalse

Enables tabbar, same as using <Tabbar> component

tabbarIconsbooleanfalse

Enables tabbar with icons, same as using <Tabbar icons> 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 'konsta/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 strongIos outlineIos 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.
2022 © Konsta UI by nolimits4web.