Toolbar

yarn add @clayui/toolbar

A toolbar is a set of actions related to a specific context that are grouped into a horizontal bar.

Introduction
Composing

Introduction

A toolbar organizes actions into a horizontal bar that is responsive. Its height changes to accommodate the height of the elements it contains. The toolbar always maintains the vertical alignment.

Code Sample (expand to see it)

Composing

ClayToolbar.Nav is the highest level wrapper to be used inside the Toolbar to wrap all the content inside.

ClayToolbar.Item represents a Toolbar child item, a list item that is supposed to wrap around any of the other low-level components.

ClayToolbar.Section is a wrapper to be used inside the ClayToolbar.Item that makes the contents it wraps display inline.

ClayToolbar.Action is used when you want a clickable icon to add an action in the Toolbar.

ClayToolbar.Input, ClayToolbar.Label and ClayToolbar.Link are essentially a wrapper around their respective Clay components with some specifics related to Toolbar.

Code Sample (expand to see it)