New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Appearance

The ToolBar provides predefined appearance options such as different sizes and settings to control its overflow behavior.

For a complete example, refer to the Appearance Demo of the ToolBar.

Options

The ToolBar HtmlHelper and its Overflow configuration provide the following methods for styling:

Size()—configures the overall size of the component.
ScrollButtons()—Defines the visibility of scroll buttons when mode is "scroll".
ScrollButtonsPosition()—Defines the placement of scroll buttons.
ScrollDistance()—Specifies the distance (in pixels) the toolbar scrolls when a scroll button is clicked.
Mode()—Defines the overflow mode.

Size

To control the size of the ToolBar, configure the Size option with any of the following values:

Small
Medium - the default size
Large
None

Razor
@(Html.Kendo().ToolBar()
    .Name("toolbar")
    .Size(ComponentSize.Small)
    .Items(items =>
    {
        items.Add().Type(CommandType.Button).Text("Button");
        items.Add().Type(CommandType.Button).Text("Toggle Button").Togglable(true);
    })
)
Razor
<kendo-toolbar name="toolbar" size="ComponentSize.Small">
    <toolbar-items>
        <item text="Button" type="CommandType.Button">
        </item>
        <item text="Toggle Button" togglable="true" type="CommandType.Button">
        </item>
</kendo-toolbar>

Mode

The Mode() setting defines the overflow mode. The available options are:

Menu — Moves overflowing items into a dropdown menu.
Scroll — Keeps items visible and enables horizontal scrolling.
Section — Groups items into collapsible sections.
None — Disables overflow handling and items may be cut off.

Razor
@(Html.Kendo().ToolBar()
    .Name("toolbar")
    .Overflow(o=>o
       .Mode(ToolBarOverflowMode.Scroll)
    )
    .Items(items =>
    {
        items.Add().Type(CommandType.Button).Text("Button");
        items.Add().Type(CommandType.Button).Text("Toggle Button").Togglable(true);
    })
)
Razor
<kendo-toolbar name="toolbar">
    <overflow mode="ToolBarOverflowMode.Scroll" />
    <toolbar-items>
        <item text="Button" type="CommandType.Button">
        </item>
        <item text="Toggle Button" togglable="true" type="CommandType.Button">
        </item>
</kendo-toolbar>

ScrollButtons

The ScrollButtons() setting defines the visibility of scroll buttons when mode is "scroll". The available options are:

Auto — Displays scroll buttons only when needed. This is the default value.
Hidden — Hides the scroll buttons at all times.
Visible — Always shows the scroll buttons.

Razor
@(Html.Kendo().ToolBar()
    .Name("toolbar")
    .Overflow(o=>o
       .Mode(ToolBarOverflowMode.Scroll)
       .ScrollButtons(ScrollButtonsType.Auto)
    )
    .Items(items =>
    {
        items.Add().Type(CommandType.Button).Text("Button");
        items.Add().Type(CommandType.Button).Text("Toggle Button").Togglable(true);
    })
)
Razor
<kendo-toolbar name="toolbar">
    <overflow mode="ToolBarOverflowMode.Scroll" scroll-buttons="ScrollButtonsType.Auto" />
    <toolbar-items>
        <item text="Button" type="CommandType.Button">
        </item>
        <item text="Toggle Button" togglable="true" type="CommandType.Button">
        </item>
</kendo-toolbar>

ScrollButtonsPosition

The ScrollButtonsPosition() setting defines the placement of scroll buttons. The available options are:

Split — Scroll buttons appear at both ends of the toolbar.
Start — Scroll buttons appear only at the start of the toolbar.
End — Scroll buttons appear only at the end of the toolbar.

Razor
@(Html.Kendo().ToolBar()
    .Name("toolbar")
    .Overflow(o=>o
         .Mode(ToolBarOverflowMode.Scroll)
         .ScrollButtonsPosition(ScrollButtonsPositionType.Start)
    )
    .Items(items =>
    {
        items.Add().Type(CommandType.Button).Text("Button");
        items.Add().Type(CommandType.Button).Text("Toggle Button").Togglable(true);
    })
)
Razor
<kendo-toolbar name="toolbar">
    <overflow mode="ToolBarOverflowMode.Scroll" scroll-buttons-position="ScrollButtonsPositionType.Start" />
    <toolbar-items>
        <item text="Button" type="CommandType.Button">
        </item>
        <item text="Toggle Button" togglable="true" type="CommandType.Button">
        </item>
</kendo-toolbar>

ScrollDistance

The ScrollDistance() setting specifies the distance (in pixels) the toolbar scrolls when a scroll button is clicked. Default is 50.

Razor
@(Html.Kendo().ToolBar()
    .Name("toolbar")
    .Overflow(o=>o
        .Mode(ToolBarOverflowMode.Scroll)
        .ScrollDistance(50)
    )
    .Items(items =>
    {
        items.Add().Type(CommandType.Button).Text("Button");
        items.Add().Type(CommandType.Button).Text("Toggle Button").Togglable(true);
    })
)
Razor
<kendo-toolbar name="toolbar">
    <overflow mode="ToolBarOverflowMode.Scroll" scroll-distance="50" />
    <toolbar-items>
        <item text="Button" type="CommandType.Button">
        </item>
        <item text="Toggle Button" togglable="true" type="CommandType.Button">
        </item>
</kendo-toolbar>