A drop-down menu, the SharePoint way

Six months ago, I showed on a simple example how to reuse the default SharePoint drop-down menu. As Larry reminded me, it’s time for me to keep the promises I made and share more advanced solutions.

The solution I am going to detail adds two features:
- two levels instead of one
- the menu items are pulled from a SharePoint list

Visit my SharePoint site for a live demo.

There are various ways to pull content from a SharePoint list. I have chosen to use SharePoint Designer and the Data View Web Part for this example, as it is very convenient when working with grouped items.

Step 1: building the list

Here again you have various options, my preferred choice is to start from scratch and use a custom list.

We’ll need the following columns:
- Title: for the item title
- Description: text column
- Link: a text column for the hyperlink
- Icon: a text column for the link to the item icon
- Category: a column that we’ll use for grouping items.

An example from the above picture:
- Title: Cleverworkarounds – Welcome
- Description: Authority: 27
- Link: http://www.cleverworkarounds.com/
- Icon: /Utilities/Technorati.gif
- Category: Authority: 25 to 29

As you can see, a text column is more flexible than a hyperlink column to enter URLs. In the above example, I used a relative path for the icon.

Apply the sorting and filtering rules you need, don’t use grouping options at this point. For my example I applied:
1/ Sort by Category (descending)
2/ Sort by Description (descending)
3/ Sort by Title

Step 2: building the Data View Web Part

If you are not familiar with SPD and the DVWP, I recommend that you start with these references. Note in particular the tip about creating a temporary page.

So let’s create a new Web Part page and add our list. Then open the page in SharePoint Designer in design mode, right click on the list view and select “Convert to XSLT Data View” (again, see these references for details).

In Data view, select the “Common Data View Tasks” pane for the last adjustments.

We are now going to add the grouping rule. Under “Sort and Group”, select the Category field, and check the following boxes: “Show group header” and “Show group footer”.

Make other changes as needed in the “Common Data View Tasks” pane. For example, I chose to display all items (Paging option).

Our last action in design mode is to select all the column headers and delete them.

Step 3: Adding the code

We’ll now switch to code view to go through the XSLT and make some changes. Note that you can also do this directly through the SharePoint UI.

Update [01/21/09]: because of formatting issues, I have moved the code to the download section of my demo site. Right click on DropDownMenu-1.txt and DropDownMenu-2.txt to download the files.

Search for:

					<xsl:call-template name="dvt_1.body">
						<xsl:with-param name="ParentPath" />
						<xsl:with-param name="Rows" select="$Rows" />
						<xsl:with-param name="FirstRow" select="1" />
						<xsl:with-param name="LastRow" select="$dvt_RowCount" />

					</xsl:call-template>

And replace it with the content of DropDownMenu-1.txt.

Then search for these three templates:

<xsl:template name="dvt_1.rowview">
...
</xsl:template>

<xsl:template name="dvt_1.groupheader0">
...
</xsl:template>

<xsl:template name="dvt_1.groupfooter0">
...
</xsl:template>

And replace them with the content of DropDownMenu-2.txt.

Save your changes and open the page in your browser. You should now see your SharePoint list displayed in the form of a two-level drop-down menu (the SPD design view will not render the menu).

Change the value of the largeIconMode attribute from “true” to “false” if you prefer the small version.

Your drop-down menu will work as is, but you can do some additional cleanup in the XSLT and remove useless stuff.

This post is largely inspired by Tariq’s menu for SharePoint 2003 (in particular the idea to use the group footer). The 2007 version works in both Internet Explorer and Firefox.