Responsive FloatingToolbar

Premium

Updated on Oct 6, 2026

The FloatingToolbar provides built-in horizontal scrolling to keep tools on one row when space is limited.

Scroll Mode

To keep tools on one row and scroll horizontally when they do not fit, set the overflow property to scroll. The default value is none, which does not apply an overflow strategy.

While overflow is set to scroll, you can configure the following options:

• scrollButtons—Determines the visibility of the scroll buttons. The available values are hidden, visible, and auto (default).
• scrollButtonsPosition—Specifies the position of the scroll buttons: start, end, or split (default).
• buttonScrollSpeed—Sets the scroll speed in pixels when clicking a scroll button. The default value is 100.
• prevButton and nextButton—Specifies custom scroll buttons.

The FloatingToolbar recalculates overflowing tools when the available width changes, such as when the browser window is resized.

The following example demonstrates a text-formatting toolbar that scrolls horizontally when its tools do not fit. Use the slider to change the width of the FloatingToolbar.

Example

View Source

Loading ...

Suggested Links

• API Reference of the FloatingToolbar
• API Reference of the FloatingToolbarProps
• Responsive Toolbar