ASP.NET Core 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 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")
)
@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, 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);
})
)
@addTagHelper *, Kendo.Mvc
<kendo-appbar name="appbar" theme-color="AppBarThemeColor.Light">
<items>
<appbar-item type="AppBarItemType.ContentItem" template="<button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-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—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.