# Overflow

The FloatingToolBar for ASP.NET Core passes its `Overflow()` configuration to the hosted ToolBar. Use it to define how the toolbar behaves when its tools do not fit in the available width.

## Overflow Modes

The `Mode()` option of the `Overflow()` configuration accepts the following `ToolBarOverflowMode` values:

* `Menu` (default)—Moves the tools that do not fit into an overflow menu.
* `Scroll`—Keeps all tools on the toolbar and enables horizontal scrolling.
* `Section`—Moves the tools that do not fit into an expandable section.
* `None`—Disables the overflow handling. The tools that do not fit may be clipped.

In the `Scroll` mode, use the `ScrollButtons()`, `ScrollButtonsPosition()`, and `ScrollDistance()` options to configure the scroll buttons.

```Razor HtmlHelper
    @(Html.Kendo().FloatingToolBar()
        .Name("floatingtoolbar")
        .Visible(true)
        .Overflow(overflow => overflow
            .Mode(ToolBarOverflowMode.Scroll)
            .ScrollButtons(ScrollButtonsType.Auto)
            .ScrollButtonsPosition(ScrollButtonsPositionType.Split)
            .ScrollDistance(120))
        .Items(items =>
        {
            items.Add().Type(CommandType.Button).Text("Track").Icon("map-marker-target");
            items.Add().Type(CommandType.Button).Text("Comment").Icon("comment");
            items.Add().Type(CommandType.Button).Text("Print").Icon("print");
            items.Add().Type(CommandType.Button).Text("Share").Icon("share");
        })
    )
```

```Razor TagHelper
    <kendo-floatingtoolbar name="floatingtoolbar" visible="true">
        <floatingtoolbar-overflow mode="ToolBarOverflowMode.Scroll"
                                  scroll-buttons="ScrollButtonsType.Auto"
                                  scroll-buttons-position="ScrollButtonsPositionType.Split"
                                  scroll-distance="120" />
        <floatingtoolbar-items>
            <item type="CommandType.Button" text="Track" icon="map-marker-target" />
            <item type="CommandType.Button" text="Comment" icon="comment" />
            <item type="CommandType.Button" text="Print" icon="print" />
            <item type="CommandType.Button" text="Share" icon="share" />
        </floatingtoolbar-items>
    </kendo-floatingtoolbar>
```

## Item Overflow

Use the `Overflow()` option of an individual item to control where the item is displayed. It accepts the following `ShowInOverflowPopup` values:

* `Auto` (default)—The item moves to the overflow menu only when there is no room for it.
* `Always`—The item is always displayed in the overflow menu.
* `Never`—The item always stays on the toolbar.

To show only the icon of an item on the toolbar and display its text in the overflow menu, set the `ShowText()` option of the item to `ShowIn.Overflow`.

The following example keeps the call controls on the toolbar and moves the secondary actions to the overflow menu.

```Razor HtmlHelper
    @(Html.Kendo().FloatingToolBar()
        .Name("floatingtoolbar")
        .Visible(true)
        .Items(items =>
        {
            items.Add().Type(CommandType.Button).Text("Chat").Icon("comment").ShowText(ShowIn.Overflow).Overflow(ShowInOverflowPopup.Always);
            items.Add().Type(CommandType.Button).Text("Participants").Icon("users-outline").ShowText(ShowIn.Overflow).Overflow(ShowInOverflowPopup.Always);
            items.Add().Type(CommandType.Button).Text("Microphone").Icon("microphone-outline").ShowText(ShowIn.Overflow).Overflow(ShowInOverflowPopup.Never);
            items.Add().Type(CommandType.Button).Text("Leave").Icon("cancel").ShowText(ShowIn.Overflow).Overflow(ShowInOverflowPopup.Never);
        })
    )
```

```Razor TagHelper
    <kendo-floatingtoolbar name="floatingtoolbar" visible="true">
        <floatingtoolbar-items>
            <item type="CommandType.Button" text="Chat" icon="comment" show-text="ShowIn.Overflow" overflow="ShowInOverflowPopup.Always" />
            <item type="CommandType.Button" text="Participants" icon="users-outline" show-text="ShowIn.Overflow" overflow="ShowInOverflowPopup.Always" />
            <item type="CommandType.Button" text="Microphone" icon="microphone-outline" show-text="ShowIn.Overflow" overflow="ShowInOverflowPopup.Never" />
            <item type="CommandType.Button" text="Leave" icon="cancel" show-text="ShowIn.Overflow" overflow="ShowInOverflowPopup.Never" />
        </floatingtoolbar-items>
    </kendo-floatingtoolbar>
```

## Next Steps

* [Handling the FloatingToolBar Events](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/events)
* [Accessibility of the FloatingToolBar](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/accessibility/overview)
* [Keyboard Navigation of the FloatingToolBar](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/accessibility/keyboard-navigation)

## See Also

* [ToolBar Appearance](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/toolbar/appearance)