# ASP.NET Core ToolBar Overview

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

The ToolBar is designed to hold different types of controls such as buttons, button groups, toggle buttons, split buttons, and other customized elements. The ToolBar consists of the ToolBar wrapper, overflow anchor, and command overflow popup main areas. The wrapper holds all commands that can be placed within the available container width. The ones that have no space to fit are moved to the command overflow popup.

* [Demo page for the ToolBar HtmlHelper](https://demos.telerik.com/aspnet-core/toolbar/index)

* [Demo page for the ToolBar TagHelper](https://demos.telerik.com/aspnet-core/toolbar/tag-helper)

## Initializing the ToolBar

The following example demonstrates how to define the ToolBar.

```Razor HtmlHelper
    @(Html.Kendo().ToolBar()
        .Name("ToolBar")
        .Items(items => {
            items.Add().Type(CommandType.Button).Text("Button");
            items.Add().Type(CommandType.Button).Text("Toggle Button").Togglable(true);
            items.Add().Type(CommandType.SplitButton).Text("Insert").MenuButtons(menuButtons =>
            {
                menuButtons.Add().Text("Insert above").Icon("insert-top");
                menuButtons.Add().Text("Insert between").Icon("insert-middle");
                menuButtons.Add().Text("Insert below").Icon("insert-bottom");
            });
        })
    )
```

```Razor TagHelper
    <kendo-toolbar name="ToolBar">
        <toolbar-items>
            <item type="CommandType.Button" text="Button 1" />
            <item type="CommandType.Separator" />
            <item type="CommandType.Button" text="Button 2" />
        </toolbar-items>
    </kendo-toolbar>
```

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

## Basic Configuration

The following example demonstrates the basic configuration of the ToolBar.

```Razor HtmlHelper
    @(Html.Kendo().ToolBar()
        .Name("ToolBar")
        .Items(items => {
            items.Add().Type(CommandType.Button).Text("Button 1").Id("button1").Click("buttonClickHandler");
            items.Add().Type(CommandType.Button).Text("Button 2").Id("button2").Click("buttonClickHandler");
            items.Add().Type(CommandType.Separator);
            items.Add().Type(CommandType.Button).Togglable(true).Text("Toggle 1").Id("toggle1").Toggle("buttonToggleHandler");
            items.Add().Type(CommandType.Button).Togglable(true).Text("Toggle 2").Id("toggle2").Toggle("buttonToggleHandler");
            items.Add().Type(CommandType.Separator);
            items.Add().Template("<input id='dropdown' style='width: 150px;' />").Overflow(ShowInOverflowPopup.Never);
            items.Add().Type(CommandType.SplitButton).Text("Split Button").Id("mainButton").Click("splitButtonClickHandler").MenuButtons(menuButtons =>
            {
                menuButtons.Add().Text("Action 1").Id("action1");
                menuButtons.Add().Text("Action 2").Id("action2");
                menuButtons.Add().Text("Action 3").Id("action3");
            });
            items.Add().Type(CommandType.Separator);
            items.Add().Type(CommandType.ButtonGroup).Buttons(buttons =>
            {
                buttons.Add().Text("Radio 1").Id("radio1").Togglable(true).Group("radio").Toggle("buttonToggleHandler");
                buttons.Add().Text("Radio 2").Id("radio2").Togglable(true).Group("radio").Toggle("buttonToggleHandler");
                buttons.Add().Text("Radio 3").Id("radio3").Togglable(true).Group("radio").Toggle("buttonToggleHandler");
            });
            items.Add().Type(CommandType.Button).Text("Overflow button").Id("overflowButton").Overflow(ShowInOverflowPopup.Always);
        })
        .Events(e => e.Click("onClick").Toggle("onToggle").Open("onOpen").Close("onClose").OverflowOpen("onOverflowOpen").OverflowClose("onOverflowClose"))
    )

    <script type="text/javascript">
        $(function() {
    	    // Initialize a DropDownList in the template of a ToolBar item.
    		$("#dropdown").kendoDropDownList({
                optionLabel: "Paragraph",
                dataTextField: "text",
                dataValueField: "value",
                dataSource: [
                    { text: "Heading 1", value: 1 },
                    { text: "Heading 2", value: 2 },
                    { text: "Heading 3", value: 3 },
                    { text: "Title", value: 4 },
                    { text: "Subtitle", value: 5 },
                ]
            });

            // The Name() of the ToolBar is used to get its client-side instance.
            var toolbar = $("#ToolBar").data("kendoToolBar");
        });
    </script>
```

```Razor TagHelper

    <kendo-toolbar name="ToolBar">
        <toolbar-items>
            <item type="CommandType.Button" text="Button" />
            <item type="CommandType.Button" text="Toggle Button" togglable="true" />
            <item type="CommandType.SplitButton" text="Insert">
                <menu-buttons>
                    <toolbar-button text="Insert above" icon="insert-top" />
                    <toolbar-button text="Insert between" icon="insert-middle" />
                    <toolbar-button text="Insert below" icon="insert-bottom" />
                </menu-buttons>
            </item>
            <item type="CommandType.Separator" />
            <item template="<label for='dropdown'>Format:</label>" />
            <item template="<input id='dropdown' style='width: 150px;' />"     overflow="ShowInOverflowPopup.Never" />
            <item type="CommandType.Separator" />
            <item type="CommandType.ButtonGroup">
                <buttons>
                    <toolbar-button text="Left" togglable="true" group="text-align" icon="align-left"     />
                    <toolbar-button text="Center" togglable="true" group="text-align"     icon="align-center" />
                    <toolbar-button text="Right" togglable="true" group="text-align"     icon="align-right" />
                </buttons>
            </item>
            <item type="CommandType.Button" text="Action" overflow="ShowInOverflowPopup.Always"/>
            <item type="CommandType.Button" text="Another Action"     overflow="ShowInOverflowPopup.Always"/>
            <item type="CommandType.Button" text="Something else here"     overflow="ShowInOverflowPopup.Always"/>
        </toolbar-items>
    </kendo-toolbar>

    <script>
        $(document).ready(function () {
            // Initialize a DropDownList in a template of the ToolBar item.
            $("#dropdown").kendoDropDownList({
                optionLabel: "Paragraph",
                dataTextField: "text",
                dataValueField: "value",
                dataSource: [
                    { text: "Heading 1", value: 1 },
                    { text: "Heading 2", value: 2 },
                    { text: "Heading 3", value: 3 },
                    { text: "Title", value: 4 },
                    { text: "Subtitle", value: 5 },
                ]
            });

            // The Name() of the ToolBar is used to get its client-side instance.
            var toolbar = $("#ToolBar").data("kendoToolBar");
        });
    </script>
```

## Functionality and Features

| Feature                                                                                                                             | Description                                                                                                                                                                                                                                                  |
| ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [Appearance](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/toolbar/appearance)                       | The component provides convenient built-in settings for changing its size and overflow options.                                                                                                                                                              |
| [Command Types](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/toolbar/command-types/button)          | The ToolBar supports various button command types.                                                                                                                                                                                                           |
| [Manual Closing](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/toolbar/close-toolbar-popup-manually) | You can configure the ToolBar to close its popup through a button `click` event.                                                                                                                                                                             |
| [FontAwesome Icons](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/toolbar/use-fontawesome-icons)     | The ToolBar enables you to use <a href="https://fontawesome.com/icons" target="_blank">FontAwesome icons</a> through its `SpriteCssClass()` configuration option.                                                                                            |
| [Resizing](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/toolbar/resizing)                           | The ToolBar supports adaptive resizing functionality.                                                                                                                                                                                                        |
| [Integration with Editors](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/toolbar/integration)        | The component can be integrated with various form editors to provide an interactive layout to the user.                                                                                                                                                      |
| [Events](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/toolbar/events)                               | Explore the various ToolBar events that allow you to control what happens when the user interacts with the component.                                                                                                                                        |
| [Accessibility](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/toolbar/accessibility/overview)        | The ToolBar is accessible for screen readers, supports WAI-ARIA attributes, and delivers [keyboard shortcuts](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/toolbar/accessibility/keyboard-navigation) for faster navigation. |

## Next Steps

* [Getting Started with the ToolBar](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/toolbar/getting-started)

* [Basic Usage of the ToolBar HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/toolbar/index)

* [Basic Usage of the ToolBar TagHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/toolbar/tag-helper)

* [ToolBar in Razor Pages](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/toolbar/razor-page)

## See Also

* [Using the API of the ToolBar HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/toolbar/api)
* [Knowledge Base Section](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base)