ASP.NET MVC AppBar Overview

Telerik UI for ASP.NET MVC Ninja image

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 Resize event and implement the desired custom logic.

Next Steps

See Also

In this article