# Overview

The Kendo UI for jQuery FloatingToolBar hosts a [ToolBar](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/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](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/get-started)—Initialize a FloatingToolBar and configure its first commands.
* [Positioning](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/positioning)—Align the toolbar in a container or anchor it to a page element.
* [Appearance](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/appearance)—Set the size, fill mode, and accessible name.
* [Overflow](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/overflow)—Choose how the hosted ToolBar handles commands that do not fit.
* [Events](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/events)—Respond to visibility changes and movement.
* [Keyboard Navigation](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/accessibility/keyboard-navigation)—Navigate toolbar commands and move the draggable toolbar from the keyboard.
* [Accessibility](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/accessibility/overview)—Configure the toolbar's accessible name and draggable handle messages.

## Next Steps

* [Getting Started with the FloatingToolBar](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/get-started)
* [Positioning of the FloatingToolBar](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/positioning)
* [Appearance of the FloatingToolBar](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/appearance)
* [Overflow in the FloatingToolBar](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/overflow)
* [Events of the FloatingToolBar](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/events)
* [Keyboard Navigation of the FloatingToolBar](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/accessibility/keyboard-navigation)
* [Accessibility of the FloatingToolBar](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/accessibility/overview)

## See Also

* [JavaScript API Reference](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/floatingtoolbar)
* [ToolBar Getting Started](https://www.telerik.com/kendo-jquery-ui/documentation/controls/toolbar/get-started)