# ASP.NET Core AppBar Overview

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

The AppBar is a navigational template-driven component that renders options like action buttons, search panels, and icons. To take advantage of its functionality, you can include various [content items](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/appbar/items).

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

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

## Initializing the AppBar

The following example demonstrates how to define the AppBar.

```Razor HtmlHelper
    @(Html.Kendo().AppBar()
        .Name("appbar")
    )
```

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

    <kendo-appbar name="appbar">
    </kendo-appbar>
```

## Basic Configuration

The following example showcases a basic configuration of the AppBar that contains a button and a [`DropDownButton`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/dropdownbutton/overview), which is integrated with the help of the [`Template`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/template/overview) component.

```Razor HtmlHelper
    @(Html.Kendo().AppBar()
        .Name("appbar")
        .ThemeColor(AppBarThemeColor.Primary)
        .Items(items =>
        {
            items.Add().Template("<button class='k-button k-button-primary'>Categories</button>").Type(AppBarItemType.ContentItem);
            items.Add().Type(AppBarItemType.Spacer).Width("10px");
            items.Add().Template(Html.Kendo().Template()
            .AddComponent(ddl => ddl
                .DropDownButton()
                .Name("dropdownBtn")
                .Text("User Settings")
                .Icon("user")
                .Items(items =>
                {
                    items.Add().Id("profile").Text("My Profile").Icon("image");
                    items.Add().Id("friend-request").Text("Friend Requests").Icon("inbox");
                    items.Add().Id("settings").Text("Account Settings").Icon("gear");
                    items.Add().Id("support").Text("Support").Icon("question-circle");
                    items.Add().Id("logout").Text("Log Out").Icon("logout");
                })
            ))
            .Type(AppBarItemType.ContentItem);
        })
    )
```

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

    <kendo-appbar name="appbar" theme-color="AppBarThemeColor.Primary">
        <items>
            <appbar-item type="AppBarItemType.ContentItem" template="<button class='k-button k-button-primary'>Categories</button>"></appbar-item>
            <appbar-item type="AppBarItemType.Spacer" width="10px"></appbar-item>
            <appbar-item type="AppBarItemType.ContentItem">
                <template>
                    <kendo-dropdownbutton name="iconCssButon" text="User Settings">
                        <dropdownbutton-items>
                            <item id="profile" text="My Profile" icon="image"></item>
                            <item id="friend-request" text="Friend Requests" icon="inbox"></item>
                            <item id="settings" text="Account Settings" icon="gear"></item>
                            <item id="support" text="Support" icon="question-circle"></item>
                            <item id="logout" text="Log Out" icon="logout"></item>
                        </dropdownbutton-items>
                    </kendo-dropdownbutton>
                </template>
            </appbar-item>
        </items>
    </kendo-appbar>
```

## Functionality and Features

* [Items](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/appbar/items)—You can integrate different types of items into the AppBar.
* [Positioning](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/appbar/position)—Control the component position through the available positioning options.
* [Events](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/appbar/events)—Subscribe to the AppBar `Resize` event and implement the desired custom logic.

## Next Steps

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

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

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

## See Also

* [Knowledge Base Section](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base)