Overflow

Updated on Oct 9, 2026

The FloatingToolBar for ASP.NET MVC 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

    @(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");
        })
    )

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

    @(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);
        })
    )

Next Steps

• Handling the FloatingToolBar Events
• Accessibility of the FloatingToolBar
• Keyboard Navigation of the FloatingToolBar

See Also

• ToolBar Appearance