SharePoint 2013: SharePoint:AspMenu Styling (Quick Guide)

Quick note on how would you provide custom css to your Global Navigation in SharePoint 2013

You need to set following properties to provide custom CSS to Menu Item otherwise they won’t be picked up by SharePoint ASP Menu Control

1. UseSimpleRendering = False

2. RenderingMode = List

and then for your SharePoint AspMenu should look something like this

<SharePoint:AspMenu 
    runat="server" UseSeparateCss="false" 
    AdjustForShowStartingNode="False" StaticDisplayLevels="2" 
    AccessKey="1" SkipLinkText="" EnableViewState="False" 
    MaximumDynamicDisplayLevels="0"  
    DataSourceID="topSiteMap" Orientation="Horizontal" 
    RenderingMode="List" 
    UseSimpleRendering="False"
    ID="TopNavigationMenu">

      <StaticMenuItemStyle CssClass="custom_class_1" />
      <StaticSelectedStyle CssClass="custom_class_2" />

</SharePoint:AspMenu>

Also if you want more control over how your Global Navigation should render then make use use of 

1. <DynamicItemTemplate></DynamicItemTemplate>
2. <StaticItemTemplate></StaticItemTemplate>

 

Example

 <SharePoint:AspMenu 
    runat="server" UseSeparateCss="false" 
    AdjustForShowStartingNode="False" StaticDisplayLevels="2" 
    AccessKey="1" SkipLinkText="" EnableViewState="False" 
    MaximumDynamicDisplayLevels="0"  
    DataSourceID="topSiteMap" Orientation="Horizontal" 
    RenderingMode="List" 
    UseSimpleRendering="False"
    ID="TopNavigationMenu">
    
    <StaticItemTemplate>
     <li class="someclass">
          <asp:HyperLink runat="Server" CssClass="SomeClass" ID="c_menuitem" NavigateUrl='<%# Eval("DataPath")%>' Text='<%# Eval("Text")%>' />
     </li>
    </StaticItemTemplate>
    
 </SharePoint:AspMenu>

 

Again if this doesn’t suits your requirement then get your navigation built using repeater control, Bhavin has an excellent example

 

http://sharepoint2010customnavigation.blogspot.in/

With repeaters you will need to enable code blocks for master-page, here is how you do it

 

http://blog.shutupandcode.net/?p=646

http://blog.technock.net/2013/03/code-blocks-are-not-allowed-in-this.html

 

Hope this Helps !!!

Akhilesh Nirapure