In SharePoint 2010 the navigation menus have been greatly improved. They now produce standards compliant HTML that can be custom styled without limitations. SharePoint 2007 came with an optional master page that was configured to show sub menu items on a second row instead of as a fly-out menu. This gave you the ability to make attractive designs happen in SharePoint like this:
SharePoint 2010 does not provide such a master page out of the box but the good news is that you can copy and paste the Nav DataSource from the 2007 site into your 2010 master page. You will need to add a new control registration at the top of the page to make it work. I have pasted the code below for you so you do not have to go find it.
STEP 1. Add this control registration above the <HTML> tag in your master page:
<%@ Register Tagprefix=”PublishingNavigation” Namespace=”Microsoft.SharePoint.Publishing.Navigation” Assembly=”Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>
STEP 2. Replace the menu control with two that have PortalSiteMapDataSource‘s for their DataSource.
Replace this (you will find it in the Horizontal Nav PlaceHolder):
<SharePoint:AspMenu ID=”TopNavigationMenuV4″ Runat=”server” EnableViewState=”false” DataSourceID=”topSiteMap” AccessKey=”<%$Resources:wss,navigation_accesskey%>” UseSimpleRendering=”true” UseSeparateCss=”false” Orientation=”Horizontal” StaticDisplayLevels=”2″ MaximumDynamicDisplayLevels=”1″ SkipLinkText=”” CssClass=”s4-tn”/>
<SharePoint:DelegateControl runat=”server” ControlId=”TopNavigationDataSource” Id=”topNavigationDelegate”>
<Template_Controls>
<asp:SiteMapDataSource ShowStartingNode=”False” SiteMapProvider=”SPNavigationProvider” id=”topSiteMap” runat=”server” StartingNodeUrl=”sid:1002″/>
</Template_Controls>
</SharePoint:DelegateControl>
With this:
<div id=”menuRow1”>
<SharePoint:AspMenu ID=”TopNavigationMenuV4″ Runat=”server” EnableViewState=”false” DataSourceID=”GlobalNavDataSource” AccessKey=”<%$Resources:wss,navigation_accesskey%>” UseSimpleRendering=”true” UseSeparateCss=”false” Orientation=”Horizontal” StaticDisplayLevels=”1″ MaximumDynamicDisplayLevels=”0″ SkipLinkText=”” CssClass=”s4-tn”/>
<PublishingNavigation:PortalSiteMapDataSource ID=”GlobalNavDataSource” Runat=”server” SiteMapProvider=”CombinedNavSiteMapProvider” EnableViewState=”true” StartFromCurrentNode=”true” StartingNodeOffset=”0″ ShowStartingNode=”false” TreatStartingNodeAsCurrent=”true” TrimNonCurrentTypes=”Heading”/>
</div>
<div id=”menuRow2”>
<SharePoint:AspMenu ID=”TopNavigationMenu2″ Runat=”server” EnableViewState=”false” DataSourceID=”GlobalNavDataSource2″ AccessKey=”<%$Resources:wss,navigation_accesskey%>” UseSimpleRendering=”true” UseSeparateCss=”false” Orientation=”Horizontal” StaticDisplayLevels=”1″ MaximumDynamicDisplayLevels=”0″ SkipLinkText=”” CssClass=”s4-tn”/>
<PublishingNavigation:PortalSiteMapDataSource ID=”GlobalNavDataSource2″ Runat=”server” SiteMapProvider=”CombinedNavSiteMapProvider” EnableViewState=”true” StartFromCurrentNode=”false” StartingNodeOffset=”1″ ShowStartingNode=”false” TrimNonCurrentTypes=”Heading”/>
</div>
By looking at the two controls and data sources you will notice subtle differences. The first one is set to start from the current node and display one level of static items and zero levels of dynamic nodes (the fly-outs). The second control and data source is set to display one level of static items with a StartingNodeOffset of one. This causes the the second menu to skip the top level of sub-sites and only show the pages and sub-sites of the currently selected site.
NOTE: This will get you started but you will need to use this with the correct combination of navigation configurations on the Navigation Settings page of each site in your collection. Start with all sites displaying the same navigation items as the parent site and enable the “Show subsites” and “Show pages” settings. Then modify the settings and data source values as needed.
