Toolbar

A toolbar's your go-to spot for a bunch of handy controls like buttons, dropdowns, and checkboxes. Navigate through 'em using your arrow keys smooth and simple!

If you are using Tailwind v4, please refer to the 2.x documentation. This documentation assumes you are using Tailwind v3.

Basic

This basic example highlights the most common use cases for a toolbar.

Installation

If you hit any issues, make sure you check out the installation guide here.

Composed Components

When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Toolbar's decked out with several components to make it bangin'.

Toggle

Toggle is like light switches for your digital digs. Flip 'em on, and they light stuff up; flip 'em off, and it's lights out.

Separator

Lays down the access creds for a separator. It’s the visual boss that splits up chunks of content, like menu items or page sections.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

Orientation

By default, the toolbar is displayed horizontally. You can change it to vertical using the orientation prop.

Disabled

You can disable a toolbar either as a group or individually by using the isDisabled prop.