Toolbar

ToolBar Overview

A ToolBar is a user interface (UI) element that represents a container, wrapping groups of related actions or commands of equal importance in the form of buttons, menus, checkboxes, search bars, and more.

The ToolBar displays items horizontally, usually in a single line or column. However, when too many items cannot fit within the available space, an overflow button appears.

Live Demo

Appearance

The Telerik and Kendo UI ToolBar component supports alternative styling options which enable you to configure the individual aspects of its appearance.

Anatomy

The anatomy of the ToolBar summarizes the elements of the component.

Depending on the elements they display, the Telerik and Kendo UI ToolBars can be any of the following types:

• ToolBar—The ToolBar displays items that fit its width.
• Responsive ToolBar—The ToolBar renders a dropdown button that hides the items that do not fit its width in an overflow popup.
• Wrapped ToolBar—The ToolBar distributes the items vertically according to its width. 

1. A Toolbar with items that fit its width
2. A responsive ToolBar
3. A wrapped ToolBar

The next image shows the anatomy of a ToolBar and includes the following elements:

1. Container
2. Item
3. Separator (optional)
4. Overflow button (optional)

Size

The ToolBar provides the size configuration option that enables you to control how big or small the rendered toolbar will be. ToolBars also provide options for size customization.

size provides the following available options:

• small—Renders a small ToolBar, which contains small components as its items. Small ToolBars are suitable when the available space is limited.

  The small Telerik and Kendo UI ToolBar achieve the desired height by applying a $kendo-spacing, 1 spacing value for their paddings.

• medium (default)—Renders a medium ToolBar.

  The medium size configuration is the base according to which the small and large options are specified. The medium Telerik and Kendo UI ToolBar contains components in their default medium size and applies a $kendo-spacing, 2 spacing value for their paddings.

• large—Renders a large ToolBar, which is suitable for adaptive components and mobile devices. 

  The large Telerik and Kendo UI ToolBar achieves the recommended touch area dimensions both by wrapping components in large sizes and applying a $kendo-spacing, 2.5 value for their paddings.

• null—Removes the styling related to the size option. Not setting a size allows you to add your own, custom value.

1. Medium (default)
2. Small
3. Large

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular ToolBarFind more information about the Kendo UI for Angular ToolBar in the official product documentation of the component.

Telerik UI for Blazor ToolBarFind more information about the Telerik UI for Blazor ToolBar in the official product documentation of the component.

Kendo UI for jQuery ToolBarFind more information about the Kendo UI for jQuery ToolBar in the official product documentation of the component.

KendoReact ToolBarFind more information about the KendoReact ToolBar in the official product documentation of the component.

Kendo UI for Vue ToolBarFind more information about the Kendo UI for Vue ToolBar in the official product documentation of the component.

Telerik UI for ASP.NET Core ToolBarFind more information about the Telerik UI for ASP.NET Core ToolBar component.

Telerik UI for ASP.NET MVC ToolBarFind more information about the Telerik UI for ASP.NET MVC ToolBar component.