ASP.NET Core AppBar Overview

Telerik UI for ASP.NET Core Ninja image

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:

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"> 
    </kendo-appbar>

Functionality and Features

Events

You can subscribe to the AppBar widget's events.

    @(Html.Kendo().AppBar()
        .Name("appbar")
        .ThemeColor(AppBarThemeColor.Inherit)
        .Items(items=> {
            items.Add().Template("<a class='k-button k-button-solid-base k-button-solid k-button-md k-rounded-md' href='\\#'><span class='k-icon k-i-menu'></span></a>").Type(AppBarItemType.ContentItem);
            items.Add().Type(AppBarItemType.Spacer).Width("16px");
            items.Add().TemplateId("search-template").Type(AppBarItemType.ContentItem);
        })
        .Events(e=>e.Resize("onResize"))
    )
    <script id="search-template" type="text/x-kendo-tmpl">
        <span class="k-textbox k-input k-input-md k-rounded-md k-input-solid">
            <input autocomplete="off" placeholder="Search products" title="Search products" class="k-input-inner">
            <span class="k-input-suffix">
                <span class="k-input-icon k-icon k-i-search"></span>
            </span>
        </span>
    </script>

    <script>
        function onResize(e){
            //handle the AppBar widget's resize event
        };
    </script>
    @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 k-button-solid-base k-button-solid k-button-md k-rounded-md' 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 id="search-template" type="text/x-kendo-tmpl">
        <span class="k-textbox k-input k-input-md k-rounded-md k-input-solid">
            <input autocomplete="off" placeholder="Search products" title="Search products" class="k-input-inner">
            <span class="k-input-suffix">
                <span class="k-input-icon k-icon k-i-search"></span>
            </span>
        </span>
    </script>

    <script>
        function onResize(e){
            //handle the AppBar widget's resize event
        };
    </script>

See Also

In this article