Create a NavigationBar| UI Control for ASP.NET AJAX, C#, VB.NET

Create a Simple NavigationBar in ASP.NET AJAX

Home > How to > NavigationBar Getting Started

In this page, we will give the step by step guides on how to get started with PerNavigationBar and create a PerNavigationBar within ASP.NET application by using KT.UI Calendar Components for ASP.NET AJAX.

Here is the quick navigation on what are included in this NavigationBar starting tutorial:

How to create an ASP.NET web application for starting NavigationBar object
How to add NavigationBar control to the web page
How to add NavigationBar items within ASP.NET project
How to specify and set NavigationBar appearance

How to Create an ASP.NET Web Application

We start and create NavigationBar application within Visual Studio ASP.NET project, thus, before you begin, please be sure that you have installed and run Visual Studio 2010, 2012 or any later version.

First, please select New | Web Site from the Visual Studio 2010 File menu.
And then, please select the "ASP.NET Web Site" and enter a defined name and set location path. Following is the simple screenshot for these two stpes.

How to Add NavigationBar Control to Page

Drag and drop an AjaxPanel component to the default web page from the Toolbox.
Drag and drop a NavigationBar component into the AjaxPanel from the Toolbox.

How to Add NavigationBar Items

In the default web pag's Design window, click the PerNavigationBar's SmartTag. See following demo screenshot.
On the Smart Tag, choose Edit Items. The PerNavigationBar Item Editor appears like below sample image:
Click the Add root item button, and add a root item to your panel bar. And then, please set its Text property to "Spring".
With the "Spring" item selected, click the Add child item button, to add a child to your root item. Select the child item and set its Text property to "Aprcots".
Select the "Spring" item again, and click the Add child item button twice to add two more child items. Add respectively these two items: Plums and StrawBerries.
Select the "Spring" item again, and click the Add child itembutton again to add Summer, Autumn, winter three items and their child items.