# Responsive FloatingToolBar

The FloatingToolBar supports different overflow behaviors when the available width is limited. Set `overflow` to `menu` to move tools that do not fit into a popup, or to `scroll` to keep them on one row. The default value is `none`, which disables overflow handling.

The following sections describe the available overflow modes:

<Row>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#menu-mode">
      <ComponentTitle>Menu Mode</ComponentTitle>
      <ComponentDescription>Move the tools that do not fit into a popup menu.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#scroll-mode">
      <ComponentTitle>Scroll Mode</ComponentTitle>
      <ComponentDescription>Keep the tools on one row and scroll horizontally.</ComponentDescription>
    </Component>
  </Column>
</Row>

## Menu Mode

Set the [`overflow`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/floatingtoolbarcomponent#overflow) property to `menu` to display the tools that fit in the available width and render the rest in a popup menu that opens from the **More tools** button.

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 moves the tools that do not fit into the overflow menu. Use the slider to change the width of the FloatingToolBar.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/toolbar/floating-toolbar/overflow-menu/source.txt)

In `none` mode, implement a custom compact layout by using a `ResizeObserver` to monitor the available width and switch between full and compact layouts at runtime.

## Scroll Mode

To keep tools on one row and scroll horizontally when they do not fit, set the [`overflow`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/floatingtoolbarcomponent#overflow) property to `scroll`.

To configure the scroll behavior, pass a [`FloatingToolBarOverflowSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/floatingtoolbaroverflowsettings) object to `overflow` and set its `mode` to `scroll`. The object supports the following options:

* [`scrollButtons`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbaroverflowsettings#scrollbuttons)—Determines the visibility of the scroll buttons. The available values are `hidden`, `visible`, and `auto` (default).
* [`scrollButtonsPosition`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbaroverflowsettings#scrollbuttonsposition)—Specifies the position of the scroll buttons: `start`, `end`, or `split` (default).
* [`prevButtonIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbaroverflowsettings#prevbuttonicon), [`nextButtonIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbaroverflowsettings#nextbuttonicon), [`prevSVGButtonIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbaroverflowsettings#prevsvgbuttonicon), and [`nextSVGButtonIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/toolbaroverflowsettings#nextsvgbuttonicon)—Specifies custom icons for the 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/toolbar/floating-toolbar/overflow-scroll/source.txt)

## Suggested Links

* [API Reference of the FloatingToolBar](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/floatingtoolbarcomponent)
* [Responsive ToolBar](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/toolbar/responsive-toolbar)