I was recently working with a colleague who posed the following question:

“How can I wrap the top navigation rather than scroll it off screen?”

My follow up question was:

“Why on earth would you ever have a top navigation that was that wide?”

To which he answered:

“Don’t ask”

So, ours is not to ask why… I tried several different CSS approaches using the SharePoint:ASPMenu control. There are a bunch of good posts on how to tweak the control, but none (that I could find) that would let me change the container from a table to a list. The way I see it, since the menu is emitted as a table with one row, you are stuck with one ever expanding row of cells, doomed to never wrap. (Unless some reader can set me straight…)

So I started looking at using an HTML list. The best technique I found was to employ the ASP Repeater control and replace the existing ASPMenu control like this:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="siteMapDataSource1">
  <HeaderTemplate>
    <ul>
  </HeaderTemplate>
  <ItemTemplate>
    <li>
      <asp:HyperLink NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("Title") %>' ToolTip='<%# Eval("Description") %>' runat="server" ID="Hyperlink1" NAME="Hyperlink1"/>
    </li>
  </ItemTemplate>
  <FooterTemplate>
    </ul>
  </FooterTemplate>
</asp:Repeater>

This is what the results look like:

How’s it work?

The DataSourceId points to the same datasource as the ASPMenu I replaced. The HeaderTemplate starts the unordered list (<ul>). The ItemTemplate creates the list item (<li>) and populates it with a hyperlink that points to the menu Url, Title, and Description. The FooterTemplate closes the list tag.

Aren’t lists supposed to go from vertically?

Yes! Yes they are, unless you apply the following CSS (assuming you are still using one of the oob masters and dropped your repeater inside the “topNav” div).

div.topNav ul {
  background-color: orange;
  list-style:none;
}

div.topNav ul li {
  display:inline;
}