Navigation is key with pretty much any web site and several sites today are choosing to duplicate their top bar navigation in a larger footer area at the bottom of each page. This technique can easily be done in a SharePoint site with a custom master page.

The Goal

I am going to use the Lear Corporation site as an example. Here is their top navigation:

And here is their footer navigation:

The drop down menu items from the top are showed statically by default in the footer as a list of sub topics.  So the data source is the same while the display differs between the two.

The Solution

Creating a second instance of the navigation in SharePoint

My approach to recreating this in SharePoint does require a custom master page.  You could also possibly do it with a SharePoint delegate control or other programming wonderfulness.

1. Open your custom master page file and locate the top navigation menu control.  To find it quickly you can do a search for TopNavigationMenu, which should bring you to this:

   <SharePoint:AspMenu ID="TopNavigationMenu" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="2" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="2" SkipLinkText=""/>

2. Copy the SharePoint:AspMenu code block. If you want the ability to remove the navigation from specific pages, also copy the wrapping ContentPlaceHolder tag.
3. Go to the location in the master page where you want the second instance of the navigation to appear.
4. Paste the code block that you copied. You will need to make a few adjustments to the code:
   1. If you copied the ContentPlaceHolder tag, update the ID to be a unique value:

      <asp:ContentPlaceHolder id="PlaceHolderFooterNavBar" runat="server">

   2. In the SharePoint:AspMenu code block, update the ID to be a unique value:

      <SharePoint:AspMenu ID="FooterNavigationMenu" Runat="server" ... >

5. Technically at this point you are done. Save and test and you will see a second instance of the top navigation bar running happily wherever you added it for the second time.

Change control properties based on needs

Where you go from here depends completely on  your design.  To continue to recreate the Lear design, I am going to take advantage of some of the AspMenu settings for the navigation control.

By default the current navigation (aka Quick Launch or left navigation) statically shows the second level of navigation on page load and does not place it in a drop down menu. The top/global nav and the left/current nav use the same control, just with different IDs, data sources and properties. I just need to duplicate some of the properties so I see the same effects in the new footer navigation.

• Change the Orientation from Horizontal to Vertical –> this will show the 3rd level of navigation (which was the drop down contents in the top nav) under the navigation headers.  If you don’t do this, the 3rd level will show to the right and left of the navigation headers.
• Change the StaticDisplayLevels from 2 to 3 –> this will show the 3rd level of navigation (which was the drop down contents in the top nav) by default on page load (vs. only appearing on hover in a drop down menu).
• Change MaximumDynamicDisplayLevels from 2 to 0 –> this will stop any drop down menus from appearing.

Here is the final code block. The ContentPlaceHolder is optional.

<asp:ContentPlaceHolder id="PlaceHolderFooterNavBar" runat="server">
	<SharePoint:AspMenu ID="FooterNavigationMenu" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>" UseSimpleRendering="true" UseSeparateCss="false" Orientation="vertical" StaticDisplayLevels="3" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="0" SkipLinkText=""/>
</asp:ContentPlaceHolder>

As is, what we have done so far is duplicate the top/global navigation but set it up like the left/current navigation so the navigation headers and their sub topic lists run vertically down the page. In order to match the Lear design, we need the navigation headers to run horizontally, showing the sub topics vertically under each header. This can be handled with CSS.

Find a way to target the new navigation

One of the challenges with working with the AspMenu controls in SharePoint is the generated code is nearly identical across all of the instances in the page. You need to identify something unique about the footer navigation so you can target it via CSS.  The two most common ways to do this are:

• Identify a chain of existing parents and/or siblings that can be used, such as:  section > div + nav div > ul.static
• Add a class to an existing wrapping HTML element or add a new wrapping HTML element with an optional class.  For example: <nav class=”custom-footer”><SharePoint:AspMenu…

Once you have identified/added-in your hook for CSS, you can add the following style statements to your CSS file. Replace footer nav below with whatever hook you have identified/added for your web site from the previous step:

Universally needed for managed and structured navigation:

footer nav ul {
	list-style: none;  /* Remove default bullets */
	padding: 0;  /* Remove list padding */
	margin: 0;  /* Remove list margin */
}

For managed navigation:

footer nav ul.static > li {
	display: inline-block;  /* Change flow from vertical list to horizontal list */
	vertical-align: top; /* Force top alignment of text */
}

For structured navigation:

footer nav div > ul.static > li > ul.static,
footer nav div > ul.static > li > ul.static > li,
footer nav div > ul.root.ms-core-listMenu-root.static > li.static:first-child a {
	display: inline-block;  /* Change flow from vertical list to horizontal list */
	vertical-align: top; /* Force top alignment of text */
}

Make it pretty

The final step is styling. You can use CSS to format the footer navigation to look completely different than the top navigation. Just use the hook that you already identified to target the new footer navigation control.

Here is an example of the above code implemented in SharePoint with some dummy navigation, styled to be similar to the Lear site footer: