SharePoint 2010 Top Navigation Menu

Create Your List First

Before you install the Web Part you should create a custom list on your primary site collection, note the list will need to reside in the default lists location in the site collection: http://<your url>/lists/<your list>. You can name the list anything you want, you will be passing the list name to the Web Part in your master page, which will be described below. Here is a list of columns that you will need in your list.



The following List Columns are used by the Web Part:

List Column Name	Description	Field Name	Type	Additional Info
Title	This field is already included in any list by default.	LinkTitle	Single line of text
Link URL	The navigation link.	Link_x0020_URL	Single line of text
Link Order	The order the link will appear in the menu.	Link_x0020_Order	Number
Show Menu Item	Show or hide the menu item.	Show_x0020_Menu_x0020_Item	Choice	Add 2 values: Yes No
Parent Menu	The parent menu item.	Parent_x0020_Menu	Lookup	Get Information From: choose <your list name> In this column: choose Title
OpenNewWindow	Open link in a new window	OpenNewWindow	Yes/No

The name of the columns in the list are important because the column names are hard coded in the Web Part. The field name is what really matters here. The Web Part uses CAML queries to reference the fields in the list.

You should add a couple of items to your list so you can see some results once the Web Part is installed and configured in the Master Page. So how do you accomplish security trimming, simple.... You can apply permissions to each list item, slick.

Install The Web Part

After you have created your list, you can now install the Web Part, this is the easy part. Using another excellent tool SharePoint Solution Installer, it was simple to create an installation for the feature:

• Download the zip file from the download section
• From a Web Frontend, unzip the zip file you just downloaded
• Run the setup.exe
• Keep choosing next until you reach the Web Applications/Site Collections page, click on the desired webapp(s)/site collection(s) where the feature will be installed, then choose next
• Choose Next, then Close to close out the setup
• Your feature should be activated but if not, activate your feature from Site Collection Features (Site Actions->Site Settings->Site collection featues, under Site Collection Administration)

You will see a reference to SharePoint 2007 when running the setup, this is because the SharePoint Installer does not fully support SharePoint 2010, but it will install just fine.

Configure The Master Page

So now we have to add the Web Part to the Master Page. Using SharePoint Designer, open up your Master Page. I find the split view in SPD the easiest, so you can see the code and the design on one page. After opening your master page, you will need to register the assembly. At the top of the master page you will see several assembly declarations, we need to register the assembly so we can use it in the Master Page. Head to the end of the declaration section just before the first HTML tag and add this line:

<%@ Register TagPrefix="spNav" Namespace="spNavMenu2010" Assembly="spNavMenu2010, Version=1.0.0.0, Culture=neutral, PublicKeyToken=e7d947ded56689ec" %>



Next we can add the Web Part to the Master Page. We are going to replace the top menu, but the Web Part can be configured as a side menu/vertical navigation as well. Find the the ContentPlaceHolder control for your top menu, should look something like this:

<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">.

You will want to comment out everything between the beginning and closing ContentPlaceHolder tags.

<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
<!-- <SharePoint:AspMenu ID="TopNavigationMenu" .....> .... </SharePoint:AspMenu> <SharePoint:DelegateControl ...>...</SharePoint:DelegateControl> -->
</asp:ContentPlaceHolder>

Now add the new Web Part, make sure to put it between the beginning and ending ContentPlaceHolder tags:

<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
<spNav:spNavMenu2010 runat="server" id="TopNavigationMenu" Set_MenuList="<name of your list>" Set_ServerURL="<url of your SharePoint site>" />
<!-- <SharePoint:AspMenu ID="TopNavigationMenu" .....> .... </SharePoint:AspMenu> <SharePoint:DelegateControl ...>...</SharePoint:DelegateControl> -->
</asp:ContentPlaceHolder>

Just for clarity, you will notice that the original/commented out AspMenu is below the spNav Web Part we just added and is between the ContentPlaceHolder tags. There are a couple of parameters that are necessary for the Web Part to work, one is the name of the list you just created and the other is the URL of your primary site collection, where your list resides.... If you named your list MyList and your primary site collection url was http://myspsite then your Web Part would look like this:

<spNav:spNavMenu2010 runat="server" id="TopNavigationMenu" Set_MenuOrientation="horizontal" Set_TopNavigationMenu="yes" Set_MenuList="MyList" Set_ServerURL="http://myspsite"/>

NOTE: If this is a top menu, you will need to give it a special id - "TopNavigationMenu" or the menu items will display behind the webparts on the page. There is an additional parameter to force the id, but setting the id directly will suffice.

Once you add the menu, you should see it render from the SPD designer view, if it doesnt, try clicking on a different control in the Master Page, that will usually trigger an update. Save your work and publish/approve your master page.

After you confirmed the Web Part is working you should remove the original ASP Menu, while we have commented out the menu, it appears that SPD (and SharePoint as well) still reads/processes the control. After subsequent edits to the master page from SPD, I noticed that SPD was adding some garbage to the commented menu and causing the master page to produce errors. Problem resolved by removing the commented out ASP menu.

Register the navigation css file

Find this tag in your master page:
<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server"/>

Add this tag right after the tag referenced above:
<SharePoint:CssRegistration name="spNavigation/spNavigation.css" After="corev4.css" runat="server"/>

This will register the css file that is installed with the web part. You can customize the css file to meet your look and feel needs, see next section.

Change The Look And Feel

So now you want to customize the look and feel, we can do that... This is where things are much easier than the 2007 counterpart. There is a custom style sheet built right into the solution. SharePoint 2010 also makes this much easier as the rendering of the menu is much cleaner. The style sheet can be found here C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\template\LAYOUTS\1033\STYLES\spNavigation\spNavigation.css. The AspMenu has been preconfigured to look like the out of the box menu, feel free to customize for your needs.


Reference:
http://spnavigationmenu2010.codeplex.com/documentation