Drop-down menus in SharePoint

Did you know you can add drop-down menu functionality to the top navigation and the quick launch menu? This is a very basic feature of SharePoint, and as I found out it's not common knowledge. It's not new - I used it in MOSS 2007 and it's still there.

This is how it looks in the top navigation:
top navigation drop-down menu

And this is the quick launch menu:
quick launch drop-down menu

You only have to set 2 properties in these controls to achieve this. They are located in the master page, so you have to edit it in SharePoint Designer.
This is the quick launch menu control:
<SharePoint:AspMenu
  id="V4QuickLaunchMenu"
  runat="server"
  EnableViewState="false"
  DataSourceId="QuickLaunchSiteMap"
  UseSimpleRendering="true"
  UseSeparateCss="false"
  Orientation="Vertical"
  StaticDisplayLevels="2"
  MaximumDynamicDisplayLevels="0"
  SkipLinkText=""
  CssClass="s4-ql" />
We are interested in 2 properties:
  • StaticDisplayLevels - this determines how many levels are seen by default
  • MaximumDynamicDisplayLevels - this determines how many levels can be expanded
For example, if you set StaticDisplayLevel to 1 and MaximumDynamicDisplayLevels to 4, you'll see only the top site but when you hover over it you'll get 4 more sub-sites. If your hierarchy goes deeper than 4 sub-sites you won't be able to see the rest.

The same goes for the top navigation menu, but be careful - if you set StaticDisplayLevel to something greater than 2 you'll get sub sites on the same level as the top site.

Please note that the sub-sites have to inherit the navigation from their parent in order for the menus to be consistent across all the sites.

Finally, it is most advised to modify the css so that the menus look appealing. The default design does not look good on them.

Print Friendly and PDF

3 comments:

Jacklyn said...

the href="http://www.sharepointinnovations.com/sharepoint-training/default.aspx">SharePoint Training
the href="http://www.sharepointinnovations.com/consulting/sharepoint.aspx">SharePoint Consulting
the href="http://www.sharepointinnovations.com/sharepoint-support/default.aspx">SharePoint Support
Great Article!

Karina Rusnak said...

Can you post your snippet code for this. I am trying to firgure out how you created a third level of navigation, subsite b1a, for example.

Ami said...

Hi, the code is in the post itself. It displays the existing site structure, for example I created subsite b1a. Then I just specified how many levels I wanted to be displayed.
StaticDisplayLevels - this determines how many levels are seen by default
MaximumDynamicDisplayLevels - this determines how many levels can be expanded

Post a Comment