New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Hybrid NavBar HtmlHelper Overview

The hybrid Telerik UI NavBar HtmlHelper for ASP.NET MVC is a server-side wrapper for the hybrid Kendo UI NavBar widget.

The NavBar displays an application navigation bar. It provides options for showing the current view title in the center and also for rendering additional left- and right-aligned controls such as Back buttons and so on.

Basic Configuration

  1. Create a new ASP.NET MVC 5 application. If you have installed the Telerik UI for ASP.NET MVC Visual Studio Extensions, create a Telerik UI for ASP.NET MVC application. If you decide not to use the Telerik UI for ASP.NET MVC Visual Studio Extensions, follow the steps from the introductory article to add Telerik UI for ASP.NET MVC to the application.
  2. Open HomeController.cs and modify the Index action method.

    public ActionResult Index()
    {
        return View();
    }
    
  3. Add a hybrid Telerik UI NavBar to the Index view. Like most hybrid controls, the NavBar must be initialized within the hybrid View content.

    @(Html.Kendo().MobileView()
        .Name("navbar-home")
        .Title("Index")
        .Header(obj =>
            Html.Kendo().MobileNavBar()
                    .Content(navbar =>
                    @<text>
                        @(Html.Kendo().MobileBackButton()
                                .Align(MobileButtonAlign.Left)
                                .Text("Back"))
                        @navbar.ViewTitle("")
                    </text>)
            )
        .Content(@<text>View Content</text>)
    )
    
  4. Initialize the mobile applic1.

    @(Html.Kendo().MobileApplication()
        .ServerNavigation(true)
    )
    
  5. Build and run the application.

Referencing Existing Instances

You can reference a hybrid NavBar instance by using the code from the following example. Once a reference is established, use the hybrid NavBar client-side API to control its behavior.

@(Html.Kendo().MobileView()
    .Name("navbar-home")
    .Title("Index")
    .Header(obj =>
        Html.Kendo().MobileNavBar()
            .Name("MobileNavBar")
            .Content(navbar =>
                @<text>
                    @(Html.Kendo().MobileBackButton()
                            .Align(MobileButtonAlign.Left)
                            .Text("Back"))
                    @navbar.ViewTitle("")
                </text>)
    )
    .Content(@<text>View Content</text>)
)
<script>
    $(function() {
        // The Name() of the NavBar is used to get its client-side instance.
        var navbar = $("#MobileNavBar").data("kendoMobileNavBar");
    });
</script>

See Also

In this article