Toolbar

The responsive Toolbar layout is a versatile tool that allows spacing, grouping, and aligning inline items.

Basic Usage

To implement the Toolbar component, you need to import it first:

import { Toolbar, ToolbarItem } from '@react-ui-org/react-ui';

And use it:

See API for all available options.

General Guidelines

• Toolbar is great for flexible inline layouts. For stacking your content vertically or building two-dimensional layouts head to the Grid layout.

• Wrap your items into the ToolbarItem component. This ensures your content is properly spaced and aligned with other Toolbar elements. Do not try to put any custom HTML or React components directly into the Toolbar layout without wrapping it with the ToolbarItem first.

• Be careful with using Toolbar with long or dynamic items in narrow containers. Toolbar intentionally prevents its items from shrinking using flex: none which may cause overflow in case of lack of horizontal space. Depending on your situation, consider turning on the nowrap option (which allows shrinking of items but disables Toolbar from wrapping), using the Text component to precisely control text wrapping, or switching to the Grid layout.

Alignment

You can tweak your Toolbar layout using rich alignment options, both in horizontal and vertical direction.

👉 At the current stage of development, React UI is RTL aware so switching to a fully RTL-compatible behavior in the future should be painless. That's why the justification values are called rather start than left and end instead of right.

Groups

Toolbar items can be grouped which enables you aligning related items together. To provide the best possible flexibility for building your layout, the ToolbarGroup allows you to set many options similar to the Toolbar: vertical alignment, dense spacing, or disable wrapping.

Dense Layout

Sometimes it's useful to get related items even closer together. This can be easily achieved through the dense option which can be applied on individual toolbar groups, or on the entire toolbar.

Wrapping

By default, all toolbar items are queued up one after another in a row. The items automatically wrap and create a new row. To prevent this behavior, just set the nowrap option on the Toolbar or on individual ToolbarGroups. Note that ToolbarGroups can still wrap when the wrapping is disabled just on their parent Toolbar.

📐 Try resizing the playground below to see how it works.

👉 Depending on your situation, you may need to further control wrapping of text content placed within Toolbar. The Text component is designed specifically for this kind of job.

Flexible Items

Toolbar items can be made flexible to grow and shrink according to the available space. This is useful e.g. when you need to combine text with an action:

Or to build a classic media layout with image on the left and text on the right:

Forwarding HTML Attributes

In addition to the options below in the component's API section, you can specify React synthetic events or any HTML attribute you like. All attributes that don't interfere with the API are forwarded to the root <div> HTML element. This enables making the component interactive and helps to improve its accessibility.

👉 Refer to the MDN reference for the full list of supported attributes of the div element.

API

ToolbarGroup API

A wrapper for grouping ToolbarItems together.

ToolbarItem API

A wrapper for individual toolbar items.

Theming