UseSimpleRendering in a SharePoint 2010 Navigation Menu

Heather Waterman and I were talking about some stuff today (Name dropper, you say? Absolutely!) and she pointed out an interesting little trick with an SharePoint:AspMenu control.

SharePoint:AspMenu controls are used in SharePoint to dynamically create navigational elements like the top navigation tabs. In SharePoint 2007, those tabs were rendered as pretty complicated TABLE constructs, and you didn’t have a lot of choice about it. Many a designer lamented this, wanting nice, clean unordered lists (UL) to work with instead.

Well, in SharePoint 2010, the navigation elements are rendered as unordered lists, just like everyone’s wanted for years. Everyone’s happy, right? Well, apparently that may not be the case because the SharePoint:AspMenu control in SharePoint 2010 now has property called UseSimpleRendering which you can use to basically revert that behavior back to the more standard ASP.NET TABLE-based elements.

By default, UseSimpleRendering is set to true in SharePoint 2010, as shown in the highlighted line below.

<SharePoint:AspMenu
  ID="TopNavigationMenuV4"
  Runat="server"
  EnableViewState="true"
  DataSourceID="topSiteMap"
  UseSimpleRendering="true"
  AccessKey="<%$Resources:wss,navigation_accesskey%>"
  UseSeparateCss="false"
  Orientation="Horizontal"
  StaticDisplayLevels="1"
  MaximumDynamicDisplayLevels="1"
  SkipLinkText=""
  CssClass="ms-topNavContainer">
  <StaticMenuItemStyle CssClass="ms-topnav" ItemSpacing="0px"/>
  <StaticSelectedStyle CssClass="ms-topnavselected" />
  <StaticHoverStyle CssClass="ms-topNavHover" />
  <DynamicMenuStyle  BackColor="#fff" BorderColor="#E8E8E4" BorderWidth="1px"/>
  <DynamicMenuItemStyle CssClass="ms-topNavFlyOuts"/>
  <DynamicHoverStyle CssClass="ms-topNavFlyOutsHover"/>
  <DynamicSelectedStyle CssClass="ms-topNavFlyOutsSelected"/>
</SharePoint:AspMenu>

This renders markup for the top nav which looks something like this:

<DIV id=zz15_TopNavigationMenuV4 class=ms-topNavContainer>
  <DIV class="menu horizontal menu-horizontal">
    <UL class="root static">
      <LI class="static selected">
        <A accessKey=1 class="static selected menu-item" title="Home Page" href="/Pages/default.aspx">
          <SPAN class=additional-background>
            <SPAN class=menu-item-text>Home</SPAN>
            <SPAN class=ms-hidden>Currently selected</SPAN>
          </SPAN>
        </A>
      </LI>
    ...

Don’t like that newfangled markup that everyone’s been clamoring for? Hey, switch UseSimpleRendering to false and you can go back to the bad ole days.

<TABLE id=zz1_TopNavigationMenuV4 class="ms-topNavContainer zz1_TopNavigationMenuV4_2" border=0 cellSpacing=0 cellPadding=0><TBODY>
  <TR>
    <TD id=zz1_TopNavigationMenuV4n0 onmouseover=Menu_HoverStatic(this) title="Home Page" onkeyup=Menu_Key(this) onmouseout=Menu_Unhover(this)>
      <TABLE class="ms-topnav zz1_TopNavigationMenuV4_4 ms-topnavselected zz1_TopNavigationMenuV4_9" border=0 cellSpacing=0 cellPadding=0 width="100%" hoverClass="zz1_TopNavigationMenuV4_13 ms-topNavHover">
        <TBODY>
          <TR>
            <TD style="WHITE-SPACE: nowrap">
              <A accessKey=1 style="BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none; FONT-SIZE: 1em; BORDER-LEFT-STYLE: none" class="zz1_TopNavigationMenuV4_1 ms-topnav zz1_TopNavigationMenuV4_3 ms-topnavselected zz1_TopNavigationMenuV4_8" href="/Pages/default.aspx" hoverHyperLinkClass="zz1_TopNavigationMenuV4_12 ms-topNavHover">Home</A>
            </TD>
          </TR>
        </TBODY>
      </TABLE>
    </TD>
  ...

Guess what else this means. Guessed yet? No? Well, it means that there are two sets of CSS classes: one for the “simple” markup, and one for the traditional ASP.NET aproach. Be sure to keep ’em in synch if you’re switching back and forth.