As we know, the skin of the navigation bar, which has two main elements, image and Cascading Style Sheets (CSS), is directly responsible for how the navigation bar look and what feel it brings to the viewers. The Skin property from the PerNavigationBar control allows users to design the general tone and appearance of the navigation bar as they wish.

And NavigationBar component contains a number of pre-defined skin styles and users can easily use these existing embedded skins by defining the value of the PerNavigationBar.skin to the name of target skin style. Of course, you are also allowed to use your own customized skin.

And from following text, you will know how add custom skin to Navigation Bar using ASP.NET AJAX.

The customization of Navigation Bar skin may refer to two cases. One is that you make some modifications based on one existing embedded skin. The other is that you create your own skin by defining the images and a stylesheet (namely, CCS). But for either of above two situations, we recommend you to start with the CCS of an existing skin and then change its settings.

Before offering you the detailed guidance of customizing the navigation bar skin, we need to mention one point that you need to define an empty value to the Skin Property and set the EnableEmbeddedSkins property to False if you want to use the Navigation Bar without any skin style.

Now we will illustrate the work that you need to do if you want to use your own skin. Actually, you can easily add your own customized navigation bar skin style to your project by following the three steps below.

1. Add the new CSS file to your project.
2. Drag and drop the CSS file from the Project Explorer onto your Web page.
3. Set the EnableEmbeddedSkins property of the PerNavigationBar to False.

Note: to make sure the PerNavigationBar control can work successfully in your ASP.NET web application, please install .NET Framework 3.5 or later versions and embed all the necessary ASP.NET AJAX dlls into your ASP.NET project. If you have any question in changing the NavigationBar skin, please free to contact us via E-mail.

If you want to know how to change the appearance style of Navigation Bar, you can visit this Controlling Appearance of Navigation Bar.