New to Telerik UI for ASP.NET Core? Start a free 30-day trial
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.
Initializing the AppBar
The following example demonstrates how to define the AppBar.
Razor
@(Html.Kendo().AppBar()
.Name("appbar")
)Basic Configuration
The following example showcases a basic configuration of the AppBar that contains a button and a DropDownButton, which is integrated with the help of the Template component.
Razor
@(Html.Kendo().AppBar()
.Name("appbar")
.ThemeColor(AppBarThemeColor.Light)
.Items(items =>
{
items.Add().Template("<button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-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);
})
)Functionality and Features
- Items—You can integrate different types of items into the AppBar.
- Positioning—Control the component position through the available positioning options.
- Events—Subscribe to the AppBar
Resizeevent and implement the desired custom logic.