KendoReact FloatingToolbar OverviewPremium
The KendoReact 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.
The FloatingToolbar is part of the kendo-react-buttons NPM package. It is a premium component and requires a commercial license. For more details, see the Buttons overview and the My License page.
Start Free Trial
The following example demonstrates the FloatingToolbar anchored to an active video call. It provides quick access to the call controls.
Key Features
- Positioning—Anchor the FloatingToolbar to a target or free-position it on the page, 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 Move mode, or use
setPositionin free-position mode. - Responsive FloatingToolbar—Use built-in horizontal scrolling to keep overflowing tools on one row when space is limited.
- Appearance—Customize the size and fill mode of the FloatingToolbar.
- Events—Respond to drag, move, and resize interactions.
- Keyboard Navigation—Navigate the FloatingToolbar with the same keyboard shortcuts as the Toolbar, plus a keyboard Move mode for dragging.
- 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: ToolbarItem, ToolbarSeparator, ToolbarSpacer, Button, ButtonGroup, DropDownButton, and SplitButton.