Toolbar

Synonyms: Toolstrip, Action Bar, Command Bar

Description: The Toolbar component presents a collection of controls (buttons and links) grouped in a compact visual form. It enables users to navigate between individual elements quickly using keyboard controls and is ideal for frequently used functions such as formatting tools or navigation controls.

Example

Toolbar with various controls (buttons and links):

<KolToolbar _items={[ { "type": "button", "_label": "Back", "_hideLabel": true, "_icons": { "left": { "icon": "kolicon-chevron-left" } } }, { "type": "button", "_label": "Next", "_hideLabel": true, "_icons": { "right": { "icon": "kolicon-chevron-right" } } }, { "type": "link", "_href": "#", "_label": "Link" }, { "type": "button", "_label": "Button" } ]} _label="Toolbar" />

Accessibility

The Toolbar component was developed with a focus on accessibility:

• Semantic label: The _label attribute serves as aria-label and describes the purpose of the toolbar for screen reader users.
• Focus management: The toolbar manages focus automatically. The first active element receives focus by default.
• Keyboard navigation: Navigation between elements is done using arrow keys, improving usability for users with motor impairments.
• Orientation flexibility: By setting the orientation to vertical or horizontal, the toolbar can be adapted to different requirements.
• Disabled state: Disabled elements are skipped during keyboard navigation and are recognizable by screen readers.

Links and references

Usage

Keyboard controls

Key	Function
Tab	Focuses the toolbar (or moves to the next element if already focused).
Arrow right	Moves focus to the next active element in the toolbar (horizontal).
Arrow left	Moves focus to the previous active element in the toolbar (horizontal).
Arrow down	Moves focus to the next active element in the toolbar (vertical).
Arrow up	Moves focus to the previous active element in the toolbar (vertical).

Best practices / Recommendations

• Meaningful grouping: Use the toolbar for related functions, e.g. formatting tools in an editor.
• Clear labels: Give each toolbar a meaningful _label that describes its purpose.
• Consistent orientation: Choose an orientation (horizontal or vertical) based on the available space and usage pattern.
• Disabled elements: Use _disabled on items in _items to disable functions that are not available in certain contexts.
• Intuitive order: Arrange elements in a logical order that matches the user's workflow.
• Icons with labels: Use icons in combination with labels or tooltips to improve usability.

Use cases

• Formatting tools: Text editing with functions like bold, italic, underline
• Navigation: Buttons for "Back" and "Next" in multi-step processes
• Document control: Functions like save, print, export
• Media control: Play, pause, stop and other controls for multimedia content
• Data editing: Actions like add, edit, delete records in tables or lists

FAQ

Which element is focused by default?
The first active (non-disabled) element in the _items array receives focus by default.

Can I change the order of elements?
Yes, the order is defined by the _items array. Change the order of objects in the array to change the order of elements.

How do I disable individual elements?
Set the _disabled property to true for the relevant element in the _items array.

Playground

Test the various properties of the Toolbar component:

<KolToolbar _items={[ { "type": "button", "_label": "Back", "_hideLabel": true, "_icons": { "left": { "icon": "kolicon-chevron-left" } } }, { "type": "button", "_label": "Next", "_hideLabel": true, "_icons": { "right": { "icon": "kolicon-chevron-right" } } }, { "type": "link", "_href": "#", "_label": "Link" }, { "type": "button", "_label": "Button" } ]} _label="Toolbar" />

Functionality

Basic toolbar with multiple elements

A toolbar with a collection of button and link elements:

<KolToolbar _items={[ { "type": "button", "_label": "Save", "_icons": { "left": { "icon": "kolicon-save" } } }, { "type": "button", "_label": "Print", "_icons": { "left": { "icon": "kolicon-printer" } } }, { "type": "button", "_label": "Delete", "_icons": { "left": { "icon": "kolicon-trash" } } } ]} _label="Editing tools" />

Orientation

The toolbar can be aligned horizontally (default) or vertically:

<KolToolbar _items={[ { "type": "button", "_label": "Back", "_hideLabel": true, "_icons": { "left": { "icon": "kolicon-chevron-up" } } }, { "type": "button", "_label": "Next", "_hideLabel": true, "_icons": { "left": { "icon": "kolicon-chevron-down" } } } ]} _label="Navigation controls" _orientation="vertical" />

Disabled elements

Individual elements can be disabled:

<KolToolbar _items={[ { "type": "button", "_label": "Bold", "_icons": { "left": { "icon": "kolicon-bold" } } }, { "type": "button", "_label": "Italic", "_disabled": true, "_icons": { "left": { "icon": "kolicon-italic" } } }, { "type": "button", "_label": "Underline", "_icons": { "left": { "icon": "kolicon-underline" } } } ]} _label="Formatting tools" />

API

Properties

Property	Attribute	Description	Type	Default
_items (required)	--	Defines the functional elements of toolbar to render (e.g. kol-link, kol-button).	ToolbarItemPropType[]	undefined
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string	undefined
_orientation	_orientation	Defines whether the orientation of the component is horizontal or vertical.	"horizontal" | "vertical" | undefined	undefined

Methods

click

click() => Promise<void>

Triggers a click on the currently active toolbar item.

Returns

Type: Promise<void>

focus(options?: KolFocusOptions) => Promise<void>

Sets focus on the currently active toolbar item.

Parameters

Name	Type	Description
options	KolFocusOptions | undefined

Returns

Type: Promise<void>

---