1. Docs
  2. components
  3. Toolbar

Toolbar

A toolbar is a container for a set of interactive controls, such as buttons, dropdown menus, or checkboxes, with arrow key navigation.

There is no built-in HTML toolbar element. Toolbar helps achieve accessible toolbars with arrow key navigation that can be styled as needed.

Installation

Copy and paste the following code into your project: toolbar.tsx

Loading...

Update the import paths to match your project setup.

Examples

Basic

Orientation

By default, toolbars are horizontally oriented. The orientation prop can be set to "vertical" to change the arrow key navigation behavior.