# Create navigation menu in Umbraco 6 using ASP.NET MVC Partial View and Razor
**by:** Shailesh Patel     **in:**  [Programming](https://www.systenics.com/blogs/category/programming)     **tags:**  [*.NET*](https://www.systenics.com/blogs/tag/net) ,  [*ASP.NET MVC*](https://www.systenics.com/blogs/tag/aspnet-mvc) ,  [*Razor*](https://www.systenics.com/blogs/tag/razor) ,  [*Umbraco*](https://www.systenics.com/blogs/tag/umbraco)
## Introduction

I was recently faced with the challenge of implementing a navigation
menu in Umbraco 6, it was very difficult to search creditable samples
which worked in Umbraco 6. In this blog post, I will explain the steps
to create a navigation menu using partial view as you can see on current
Systenics website. Besides linking the pages, we also wanted to display
a help text for each menu item. Umbraco 6 provides several ways to
implement the same, you could either use Macros, but I have chosen to
write a MVC Partial View. This article assumes that you have Umbraco 6
configured to use Mvc as the display engine so that MVC Partial Views
can be used.

Figure 1: Systenics navigation menu

Our sample Content hierarchy is as below:

Home
- Solutions
- Products
- Contact Us

## Getting Started

We need to include the parent menu item (Home) and traverse through all
child pages to create the menu in header section.

In Umbraco administration tool –> **Settings** section, right
click on **Partial Views** and select **Create** from the context menu. Give the name as **NavigationMenu** and click **Create** to create the new partial view and bring
up its editor. Copy paste the code from listing 1 below into the editor and
click **Save** to save the menu.

Listing 1: NavigationMenu.cshtml

```
@inherits Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>
@using System.Collections;
@{
Layout = null;
var parent = Model.AncestorOrSelf(1);
string classSelectedMenuItem = "";
if(Model.Name == parent.Name)
{
classSelectedMenuItem = "selected_menu_item";
}

Dictionary<string, string> menuItems =
new Dictionary<string, string>();
menuItems.Add("Home", "start here");
menuItems.Add("Solutions", "services we provide");
menuItems.Add("Contact Us", "request a quote");
}
<ul>
<li class="@classSelectedMenuItem" >
<a href="@parent.NiceUrl()">@parent.Name
<span class='helpText'>@menuItems[@parent.Name]</span></a></li>
@foreach(var page in parent.Children.Where(x => x.IsVisible()))
{
string strClassName = "";
if(@Model.Name == @page.Name)
{
strClassName = "selected_menu_item";
}
<li class="@strClassName"><a href="@page.NiceUrl()">
@page.Name<span class='helpText'>
@try { @menuItems[@page.Name] } catch { }</span></a></li>
}
</ul>
```

By default partial views in Umbraco 6 inherit from the **Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>** class as shown on line 1 above. In the above code listing, we are looping
over the results of Lambda expression query which has items with **IsVisible** property set as **true**. This property is set by adding
the **umbracoNaviHide** property to the document type that is
used to display the pages. A try-catch block is added on line 31 which will
allow the code to execute and render a blank span tag in case there is no
description provided for the added page in the dictionary item. You will have
to manually update the **menuItems** object on line 12 to contain
descriptions for all your pages.

To use this partial view, include it in your base template using the
following code of listing 2. We pass the @Model.Content parameter to the
partial view so that it can find the pages for the application.

Listing 2: Include NavigationMenu in your base template

```
@Html.Partial("NavigationMenu", @Model.Content)
```

I hope you find this little blog post helpful.