ASP.NET MVC AppBar Overview
The Appbar is part of Telerik UI for ASP.NET MVC, 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 HtmlHelper for ASP.NET MVC is a server-side wrapper 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.
@(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.
@(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.