Getting Started

Updated on Oct 9, 2026

This guide shows how to initialize a FloatingToolBar, add commands, and retrieve its widget instance.

Create an Element

Add an empty <div> element for the widget.

html

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

Initialize the FloatingToolBar

Configure the commands through the items option. Set visible to true to show the toolbar after initialization.

html

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

<script>
    $(document).ready(function () {
        $("#floatingtoolbar").kendoFloatingToolBar({
            visible: true,
            ariaLabel: "Text formatting",
            items: [
                { type: "button", text: "Bold", icon: "bold", togglable: true },
                { type: "button", text: "Italic", icon: "italic", togglable: true },
                { type: "separator" },
                { type: "button", text: "Insert Link", icon: "link" }
            ]
        });
    });
</script>

The items option uses the same command configuration as the hosted ToolBar. Set showText: "overflow" on an item when its text should appear only in the overflow menu while its icon remains on the toolbar.

Retrieve the Widget Instance

Use getKendoFloatingToolBar() to retrieve the initialized instance. Call show() and hide() to control visibility after initialization.

js

var floatingToolBar = $("#floatingtoolbar").getKendoFloatingToolBar();

floatingToolBar.hide();
floatingToolBar.show();

Next Steps

• Positioning of the FloatingToolBar
• Appearance of the FloatingToolBar
• Overflow in the FloatingToolBar
• Events of the FloatingToolBar
• Keyboard Navigation of the FloatingToolBar
• Accessibility of the FloatingToolBar

See Also

• FloatingToolBar Overview
• JavaScript API Reference