# Getting Started

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](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/toolbar/configuration/items). 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](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

* [FloatingToolBar Overview](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/overview)
* [JavaScript API Reference](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/floatingtoolbar)