Responsive Toolbar

Updated on Oct 6, 2026

The KendoReact Toolbar provides two overflow modes for keeping tools accessible when they do not fit in the available width. Choose an overflow mode with the overflow property.

• Scroll Mode
• Section Mode

Scroll Mode

Set overflow to scroll to keep toolbar tools on a single row and let users scroll horizontally when they do not fit. You can configure the following options:

• scrollButtons—Determines the visibility of the scroll buttons. The default value is auto.
• scrollButtonsPosition—Specifies the position of the scroll buttons. The default value is split.
• buttonScrollSpeed—Sets the scroll speed in pixels when users click a scroll button. The default value is 100.
• prevButton and nextButton—Specify custom scroll buttons.

The following example demonstrates how scroll mode keeps Toolbar tools accessible when they exceed the available width.

Example

View Source

Loading ...

Section Mode

Set overflow to section to move tools that do not fit into an overflow popup while preserving their initial layout.

The following example demonstrates how section mode renders overflowing Toolbar tools in a popup.

Example

View Source

Loading ...

Suggested Links

• API Reference of the Toolbar
• Creating Custom Styles