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

installyarn add @clayui/toolbar
versionNPM Version
useimport TimePicker from '@clayui/toolbar';

Snippet

Subnavigation to use with main navigations such as Management Toolbar.

Snippet

Subnavigation used in Modals

Snippet

Subnavigation used in Management Toolbar.

Snippet

Disabled sub-navigation used in Management Toolbar, just add subnav-tbar-disabled. The disabled attribute must be added to any button tag. The class disabled and attribute tabindex="-1" must be added to any anchor tag and clicks disabled via javascript.

Snippet

Helper Classes

tbar-inline-{xs|sm|md|lg|xl}-down

A helper class on tbar that turns tbar-nav, tbar-item, tbar-section, and component-title inline at specific breakpoints.

tbar-nav-wrap

A helper class on tbar-nav that breaks tbar-nav content to new line when the container becomes too small.

tbar-nav-shrink

A helper class on tbar-nav that makes it only as wide as its content, use with other tbar-nav’s.

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 12, 2025 at 7:56:02 PM