New to Kendo UI for jQuery? Start a free 30-day trial

Overflow

Updated on Oct 9, 2026

The FloatingToolBar forwards its overflow configuration to the hosted ToolBar. By default, overflowing commands move to a menu. Set overflow.mode to menu, scroll, section, or none to choose another behavior.

menu moves overflowing commands into a menu button.
scroll keeps commands in the toolbar and provides horizontal scrolling. Configure scrollButtons, scrollButtonsPosition, and scrollDistance for the scroll controls.
section groups commands into expandable sections.
none disables overflow handling. Commands may be clipped when they do not fit.

html

<div id="floatingtoolbar"></div>

<script>
    $("#floatingtoolbar").kendoFloatingToolBar({
        visible: true,
        overflow: {
            mode: "scroll",
            scrollButtons: "auto",
            scrollButtonsPosition: "split",
            scrollDistance: 120
        },
        items: [
            { type: "button", text: "Track", icon: "map-marker-target" },
            { type: "button", text: "Comment", icon: "comment" },
            { type: "button", text: "Print", icon: "print" },
            { type: "button", text: "Share", icon: "share" }
        ]
    });
</script>

Control Overflow Per Item

Set an item's overflow to auto (the default), always, or never. always places the item in the overflow menu even when there is room on the toolbar. never keeps the item on the toolbar. This is useful for keeping primary actions visible while placing secondary actions behind the menu.

items: [
    { type: "button", text: "Chat", icon: "comment", overflow: "always" },
    { type: "button", text: "Leave", icon: "cancel", overflow: "never" }
]

Set showText: "overflow" to keep an item's icon on the toolbar and show its text label in the overflow menu.

Overflow

Control Overflow Per Item

Next Steps

See Also