---
title: Usage
position: 2
seo_title: Guidelines for Using the ToolBar Component
seo_description: Get the knack of the Telerik and Kendo UI ToolBar and learn how
  to use grouping, and how to distribute ToolBar items according to the
  available space by following the instructions and recommendations in the user
  guidelines created by our designers.
---
## Usage Guidelines

The Telerik and Kendo UI ToolBar requires you to follow some basic principles when using the component.

### Grouping

Grouping of the items within the ToolBar helps the users quickly identify the related actions and make their choice. Grouping also helps screen reader users as it controls the number of stops.

<DosDonts>
<Do description="Use separators to distinguish the semantic groups of ToolBar items.">![A Telerik and Kendo UI ToolBar demonstrating grouping of its items with separators between the semantic groups.](images/components-toolbar-usage-grouping-do.png "Render Telerik and Kendo UI ToolBar with a few groups of items, divided by separators.")</Do>
<Dont description="Avoid displaying all ToolBar items without grouping them as it may seem chaotic and confusing.">![A Telerik and Kendo UI ToolBar without any grouping of the items.](images/components-toolbar-usage-grouping-dont.png "Do not render Telerik and Kendo UI ToolBar without grouping of its items.")</Dont>
</DosDonts>


### Overflow

In some cases where the space is limited both horizontally and vertically and the items within the ToolBar are numerous and cannot fit its width, an overflow button appears and accommodates the excess items.

<DosDonts>
<Do description="Use the overflow button in the adaptive ToolBar to display the content that does not fit its width when the space is limited.">![A Telerik and Kendo UI ToolBar displaying the hidden items in an overflow popup.](images/components-toolbar-usage-overflow-do.png "Use an overflow button to hide the items that do not fit the width of the ToolBar.")</Do>
<Dont description="Avoid hiding ToolBar items or stretching the ToolBar just to fit them.">![A Telerik and Kendo UI ToolBar with numerous items that increase its width.](images/components-toolbar-usage-overflow-dont.png "Do not increase the width of the ToolBar according to its items.")</Dont>
</DosDonts>


### Wrapped

The Telerik and Kendo UI ToolBar usually distributes its items in one line. In some cases, however, the numerous items cannot fit into an overflow popup and displaying them in multiple lines is preferred.

<DosDonts>
<Do description="Distribute the numerous ToolBar items vertically if they cannot fit within the width of the ToolBar.">![A Telerik and Kendo UI ToolBar that demonstrates wrapping its items in two lines.](images/components-toolbar-usage-wrapped-do.png "Wrap the numerous items of the Telerik and Kendo UI Toolbar in two lines.")</Do>
<Dont description="Avoid displaying multiple ToolBar items in an overflow popup that requires scrolling.">![A Telerik and Kendo UI ToolBar showing an overflow popup with a long list of ToolBar items and requiring scrolling.](images/components-toolbar-usage-wrapped-dont.png "Do not use overflow button to display numerous ToolBar items that fit into a long list and require scrolling.")</Dont>
</DosDonts>