Toolbar React Component

Toolbar Components
Toolbar Props
Examples

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

There are following components included:

Toolbar

Name	Type	Default	Description
bgClassName	string		Additional class to add on Toolbar's "background" element
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'bg-ios-light-surface-2 dark:bg-ios-dark-surface-2'
colors.bgMaterial	string	'bg-md-light-surface-2 dark:bg-md-dark-surface-2'
colors.tabbarHighlightBgIos	string	'bg-primary'
colors.tabbarHighlightBgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
component	string	'div'	Component's HTML Element
innerClassName	string		Additional class to add on Toolbar's "inner" element
outline	boolean	undefined	Renders outer hairlines (borders). If not specified, will be enabled for iOS theme
tabbar	boolean	false	Enables tabbar, same as using `<Tabbar>` component
tabbarIcons	boolean	false	Enables tabbar with icons, same as using `<Tabbar icons>` component
tabbarLabels	boolean	false	Enables tabbar with labels, same as using `<Tabbar labels>` component
top	boolean	false	Enables top toolbar, in this case it renders border on shadows on opposite sides
translucent	boolean	true	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>
  );
}

Toolbar React Component

Toolbar Components

Toolbar Props

Examples