# Kendo UI for Angular FloatingToolBar Overview

The Kendo UI for Angular FloatingToolBar is a popup-based container for contextual ToolBar actions. You can anchor it to a target element or position it within a container. This lets you place actions near selected text, a canvas object, an image, or an active call. Your application controls when the FloatingToolBar appears and which tools it contains, so it can reflect the active selection or task.

<CtaPanelOverview></CtaPanelOverview>

The following example demonstrates the FloatingToolBar anchored to selected text. It appears when you select part of the description and provides quick access to the text formatting tools.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/toolbar/floating-toolbar/overview/source.txt)

## Angular FloatingToolBar Key Features

* [Positioning](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/floating-toolbar/positioning)—Anchor the FloatingToolBar to a target or free-position it within a container, with collision handling and configurable spacing.
* [Visibility](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/floating-toolbar/positioning#controlling-visibility)—Render the FloatingToolBar only while its context is active, such as when a text selection exists.
* [ToolBar Composition](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/toolbar/control-types)—Use the existing ToolBar item model and controls inside the FloatingToolBar.
* [Dragging](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/floating-toolbar/dragging)—Reposition the FloatingToolBar within the viewport by pointer or keyboard.
* [Responsive FloatingToolBar](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/floating-toolbar/responsive)—Move overflowing tools to a menu, use built-in horizontal scrolling, or implement a custom compact layout when space is limited.
* [Appearance](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/floating-toolbar/appearance)—Customize the size and fill mode of the FloatingToolBar.
* [Events](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/floating-toolbar/events)—Respond to drag and move interactions.
* [Keyboard Navigation](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/floating-toolbar/keyboard-navigation)—Navigate the FloatingToolBar with the same keyboard shortcuts as the ToolBar.
* [Accessibility](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/floating-toolbar/accessibility/wai-aria-support)—Use the FloatingToolBar with screen readers and WAI-ARIA attributes.

The FloatingToolBar composes the existing [ToolBar](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/toolbar) with [Popup](https://www.telerik.com/kendo-angular-ui-develop/components/popup) instead of reimplementing the toolbar. As a result, the full ToolBar item model works unchanged inside it: `kendo-toolbar-button`, `kendo-toolbar-buttongroup`, `kendo-toolbar-separator`, `kendo-toolbar-spacer`, `kendo-toolbar-dropdownbutton`, and `kendo-toolbar-splitbutton`.

## Support and Learning Resources

* [FloatingToolBar Homepage](https://www.telerik.com/kendo-angular-ui/toolbar)
* [Getting Started with the Kendo UI for Angular Toolbars](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/installation/getting-started)
* [API Reference of the FloatingToolBar](https://www.telerik.com/kendo-angular-ui-develop/components/toolbar/api/floatingtoolbarcomponent)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)
* [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial)
* [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding)
* [ToolBar Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=1572)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base)

## Additional Resources

* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui)
* [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)