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.
Start Free Trial
The following example demonstrates the FloatingToolBar anchored to an active video call. It provides quick access to the call controls.
Angular FloatingToolBar Key Features
- Positioning—Anchor the FloatingToolBar to a target or free-position it within a container, with collision handling and configurable spacing.
- Visibility—Render the FloatingToolBar only while its context is active, such as when a text selection exists.
- ToolBar Composition—Use the existing ToolBar item model and controls inside the FloatingToolBar.
- Dragging—Reposition the FloatingToolBar within the viewport by pointer or keyboard.
- Responsive FloatingToolBar—Move overflowing tools to a menu, use built-in horizontal scrolling, or implement a custom compact layout when space is limited.
- Appearance—Customize the size and fill mode of the FloatingToolBar.
- Events—Respond to drag and move interactions.
- Keyboard Navigation—Navigate the FloatingToolBar with the same keyboard shortcuts as the ToolBar.
- Accessibility—Use the FloatingToolBar with screen readers and WAI-ARIA attributes.
The FloatingToolBar composes the existing ToolBar with 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
- Getting Started with the Kendo UI for Angular Toolbars
- API Reference of the FloatingToolBar
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Video Courses
- ToolBar Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base