Blog

Create navigation menu in Umbraco 6 using ASP.NET MVC Partial View and Razor

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.