# ASP.NET Core FloatingToolBar Overview

The Telerik UI FloatingToolBar TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI FloatingToolBar widget.

The FloatingToolBar hosts a [ToolBar](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/toolbar/overview) 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 HtmlHelper
    <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>
```

```Razor TagHelper
    @addTagHelper *, Kendo.Mvc

    <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>

        <kendo-floatingtoolbar name="floatingtoolbar" visible="true">
            <container-align horizontal="FloatingToolBarHorizontalAlign.Center" vertical="FloatingToolBarVerticalAlign.Bottom" />
            <floatingtoolbar-items>
                <item type="CommandType.Button" text="Track" icon="map-marker-target" />
                <item type="CommandType.Button" text="Print" icon="print" />
                <item type="CommandType.Separator" />
                <item type="CommandType.Button" text="Share" icon="share" />
            </floatingtoolbar-items>
        </kendo-floatingtoolbar>
    </div>
```

```C# Controller
    public class FloatingToolBarController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
```

## Functionality and Features

| Feature                                                                                                                              | Description                                                                                                                                                                                                                 |
| ------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Positioning](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/positioning)              | Align the toolbar inside a container or anchor it to a page element.                                                                                                                                                        |
| [Appearance](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/appearance)                | Configure the size and fill mode of the toolbar.                                                                                                                                                                            |
| [Overflow](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/overflow)                    | Choose how the hosted ToolBar handles commands that do not fit.                                                                                                                                                             |
| [Events](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/events)                        | Respond to visibility changes and to toolbar movement.                                                                                                                                                                      |
| [Accessibility](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/accessibility/overview) | Provide an accessible name and use the [keyboard navigation](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/accessibility/keyboard-navigation) to reach and move the toolbar. |

## Next Steps

* [Getting Started with the FloatingToolBar](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/getting-started)
* [Configuring the Position of the FloatingToolBar](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/positioning)
* [Customizing the Appearance of the FloatingToolBar](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/appearance)
* [Configuring the Overflow of the FloatingToolBar](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/overflow)
* [Handling the FloatingToolBar Events](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/events)
* [Accessibility of the FloatingToolBar](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/accessibility/overview)
* [Keyboard Navigation of the FloatingToolBar](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/accessibility/keyboard-navigation)

## See Also

* [FloatingToolBar Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/floatingtoolbar)
* [Knowledge Base Section](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base)