Overview

Updated on Oct 9, 2026

The Kendo UI for jQuery FloatingToolBar hosts a ToolBar in a floating container. Use it for contextual commands that should stay near a region of the page, such as formatting controls for selected content or actions for a card, document, or call window.

The widget supports two positioning modes:

• Free-position mode aligns the toolbar inside its closest positioned ancestor by using containerAlign and margin.
• Anchored mode positions it beside a target element by using anchor and position. Popup collision handling can flip or fit the toolbar when space is limited.

The hosted ToolBar provides the commands and overflow behavior. Use items to define buttons, toggle buttons, button groups, split buttons, separators, spacers, and supported templates. Set visible to show the toolbar at initialization, or use the client-side API to control visibility later. Set draggable to provide a pointer drag handle and keyboard Move mode.

Functionality and Features

• Getting Started—Initialize a FloatingToolBar and configure its first commands.
• Positioning—Align the toolbar in a container or anchor it to a page element.
• Appearance—Set the size, fill mode, and accessible name.
• Overflow—Choose how the hosted ToolBar handles commands that do not fit.
• Events—Respond to visibility changes and movement.
• Keyboard Navigation—Navigate toolbar commands and move the draggable toolbar from the keyboard.
• Accessibility—Configure the toolbar's accessible name and draggable handle messages.

Next Steps

• Getting Started with the FloatingToolBar
• 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

• JavaScript API Reference
• ToolBar Getting Started