New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

ASP.NET MVC FloatingToolBar Overview

Updated on Oct 9, 2026

The Telerik UI FloatingToolBar HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI FloatingToolBar widget.

The FloatingToolBar hosts a ToolBar in a floating container. Use it for contextual commands that must stay close to a region of the page, such as formatting tools for selected content or actions for a card, document, or call window.

The component supports two positioning modes:

Free-position mode—Aligns the toolbar inside its closest positioned ancestor by using the ContainerAlign() and Margin() options.
Anchored mode—Places the toolbar beside a target element by using the Anchor() and Position() options.

The hosted ToolBar renders the commands and handles the overflow. Define the commands through the Items() option, which uses the same item configuration as the ToolBar.

Initializing the FloatingToolBar

The following example demonstrates how to define a FloatingToolBar with shipment actions at the bottom of a positioned container.

Razor
    <div id="shipment-details" style="position: relative; height: 240px;">
        <p>Shipment SH-20418 left the Port of Rotterdam and is expected at the Singapore hub in 14 days.</p>

        @(Html.Kendo().FloatingToolBar()
            .Name("floatingtoolbar")
            .Visible(true)
            .ContainerAlign(align => align
                .Horizontal(FloatingToolBarHorizontalAlign.Center)
                .Vertical(FloatingToolBarVerticalAlign.Bottom))
            .Items(items =>
            {
                items.Add().Type(CommandType.Button).Text("Track").Icon("map-marker-target");
                items.Add().Type(CommandType.Button).Text("Print").Icon("print");
                items.Add().Type(CommandType.Separator);
                items.Add().Type(CommandType.Button).Text("Share").Icon("share");
            })
        )
    </div>
C#
    public class FloatingToolBarController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }

Functionality and Features

Feature	Description
Positioning	Align the toolbar inside a container or anchor it to a page element.
Appearance	Configure the size and fill mode of the toolbar.
Overflow	Choose how the hosted ToolBar handles commands that do not fit.
Events	Respond to visibility changes and to toolbar movement.
Accessibility	Provide an accessible name and use the keyboard navigation to reach and move the toolbar.

ASP.NET MVC FloatingToolBar Overview

Initializing the FloatingToolBar

Functionality and Features

Next Steps

See Also