AppBar Overview
The Appbar is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI AppBar TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI AppBar widget.
The AppBar component is mainly used for navigation. At the same time, it is template-driven, which makes it very flexible. To take full advantage of its functionality, you can include various Content Items in the AppBar component, for example:
- Titles
- Icons
Actions (such as redirect buttons or a search panel)
Initializing the AppBar
The following example demonstrates how to define the AppBar by using the AppBar HtmlHelper.
@(Html.Kendo().AppBar()
.Name("appbar")
)
@addTagHelper *, Kendo.Mvc
<kendo-appbar name="appbar" theme-color="AppBarThemeColor.Inherit">
<items>
<appbar-item type="AppBarItemType.ContentItem" template="<a class='k-button' href='\\#'><span class='k-icon k-i-menu'></span></a>"></appbar-item>
<appbar-item type="AppBarItemType.Spacer" width="16px"></appbar-item>
<appbar-item type="AppBarItemType.ContentItem" template-id="search-template"></appbar-item>
</items>
</kendo-appbar>
Functionality and Features
Events
You can subscribe to the AppBar widget's events.
@addTagHelper *, Kendo.Mvc
<kendo-appbar name="appbar" theme-color="AppBarThemeColor.Inherit" on-resize="onResize">
<items>
<appbar-item type="AppBarItemType.ContentItem" template="<a class='k-button' href='\\#'><span class='k-icon k-i-menu'></span></a>"></appbar-item>
<appbar-item type="AppBarItemType.Spacer" width="16px"></appbar-item>
<appbar-item type="AppBarItemType.ContentItem" template-id="search-template"></appbar-item>
</items>
</kendo-appbar>
<script>
function onResize(e){
//handle the AppBar widget's resize event
};
</script>