How to make a “Super Menu” control for SharePoint

Note:  These instructions apply to MOSS 2007.

It’s tinier than the Quick Launch area, more powerful than a GlobalNavigationSiteMap data source, and able to fly-out to multiple levels deep on mouse-over…it’s Super Menu Controoooooooooollllllll……

Don’t you hate clicking around in SharePoint’s navigation menus to get from one list to another, from one site to another site?  The Site Content & Structure page in MOSS is handy, but you still have to slowly root through deep hierarchies in the treeview to get where you want.

So I took the idea of customizing the Quick Launch area (http://blogs.msdn.com/sharepoint/archive/2007/04/26/customizing-the-quick-launch-menu-adding-fly-out-menus-to-sharepoint-navigation.aspx) a little further.  I want a control with a tiny GUI footprint that has the ability to see EVERYTHING in the entire Site Collection.  The problem with the Quick Launch (and the top horizontal navigation bar) is that it reads from the settings on the Site Navigation Settings page for the web currently in context.  Depending on how it is configured, these navigation controls may not display items below the current site, or everything could be replaced with custom headings and links.

So fire up SharePoint Designer to get the party started.  Open your customized default.master page (you shouldn’t edit default.master directly; make a copy if you haven’t already) in the _catalogs folder and look for the PlaceHolderGlobalNavigationSiteMap content region.  This region contains the GlobalNavigationSiteMap control that creates the horizontal text breadcrumbs throughout your portal travels.  If you like it, keep it and customize the below settings to integrate rather than delete.  Otherwise, remove the GlobalNavigationSiteMap control by deleting this markup:

<lost image>

Now paste this markup in between the PlaceHolderGlobalNavigationSiteMap content region tags, so the whole thing will look like:

<asp:ContentPlaceHolder id=”PlaceHolderGlobalNavigationSiteMap” runat=”server”>

<!– removed default navigation breadcrumb –>

<asp:Menu runat=”server” id=”Menu1″ DataSourceID=”SiteMapDataSource1″ Font-Size=”Smaller” MaximumDynamicDisplayLevels=”5″>

</asp:Menu>

<asp:SiteMapDataSource runat=”server” ID=”SiteMapDataSource1″/>

</asp:ContentPlaceHolder>

Here’s a screenshot of what it should now look like in SharePoint Designer:

<lost image>

Since the Quick Launch control is really just a closed ASP.NET Menu control, the Menu control we added with that markup will do just fine as a replacement.  By setting MaximumDynamicDisplayLevels=”5″, we increase the depth of the menus to go five levels deep.  Other properties you may want to play with are LevelMenuItemStyles, LevelSelectedStyles, and LevelSubMenuStyles, which will allow you to customize the appearance of the sub-menus with CSS.

Now save and publish your master page, and make sure that you wire up the top-level site in your Site Collection to use your custom master page if you haven’t done so already.  You can do that at http://SERVERNAME/_Layouts/ChangeSiteMasterPage.aspx.  Don’t forget to check the “Reset all subsites to inherit this Site Master Page setting” box if this is the first time you’re changing the master page.

The SiteMapDataSource object that we are binding to the Menu control differs from the GlobalNavigationSiteMap object used in the Quick Launch in that it can read the structure of the entire Site Collection plus the navigation settings for each site.  The only thing that can stop the full hierarchy from being rendered is if you have a site somewhere in the hierarchy that has the “Show subsites” option unchecked in its Site Navigation Settings page.  If it has any subsites, they of course won’t be rendered by the Menu control.  A sample rendering would look like this:

<lost image>

Enjoy!

Eric Legault

Microsoft Outlook MVP (15 yrs). Author: Microsoft Office 2013 Pro Step By Step. Consultant/speaker/Outlook add-in builder/SharePoint pioneer. Guitarist: Maiden Canada (Iron Maiden tribute band)

You may also like...

%d bloggers like this: