Create an Alphabetical SharePoint Menu Using jQuery

By:   |   Comments   |   Related: > Sharepoint Design


For site navigation, SharePoint provides a Top navigation menu and a Left navigation menu, but sometimes this is not sufficient. If you have 100 sites or pages underneath your Site Collection and you want to look at it alphabetically, anything out of the box is not going to work. You need something custom, but you don’t want to write complex C# code or spend a lot of time coding and deploying it, so what can you do?


The solution is to use JQuery!

To start, let’s have a look at what you are trying to achieve:

Figure 1

(inspired from )

The following steps will lead you towards creating the alphabetical menu:

1. For testing purposes, create a few sites and pages under your site collection based on the United States Presidents (dummy data from Wikipedia)

2. Create a custom list "Site URL Repository" at the site collection level. Add a hyperlink column ‘SITEURL’ for storing all Site URLs. This will be a Required field

3. Create a calculated column "Index" with the formula as shown below. This column will store the first character of the item’s title. It will be used to sort sites alphabetically.

Figure 2

4. Let’s have a look at the list of columns below:

Figure 3

5. The list, which will store our site URL’s is ready. Let's create an item and link it to the appropriate site

new item
Figure 4

6. This way, you will create an item for each site in this list. For testing, let us create 6 items and link them to their respective site URLs.

site url repository
Figure 5

7. Let us write a simple JQuery and HTML to create our Menu.

For querying our list, we are going to use SPAPI_lists.js and SPAPI_Core.js. Please refer to "5. Querying the list using the lists web service" section on Darren Johnstone’s blog. You can download these API files from here.

Let’s store these two SPAPI libraries at our LAYOUTS folder and refer to them as shown below:

<script language="javascript" type="text/javascript" src="/_layouts/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/_layouts/jquery/SPAPI_Lists.js"></script>
<script type="text/javascript" src="/_layouts/jquery/SPAPI_Core.js"></script>

Write some HTML and CSS to create Figure 1:

<style type="text/css">

#Tabs ul.TabsRow{
	text-align: left;
	margin: 0.5em 0 0 0;
	font: 14px arial;
	list-style-type: none;
	padding: 6px 4px 6px 4px;
#Tabs ul.TabsRow li{
	display: inline;

#Tabs ul.TabsRow a {
	font-family: arial;
	font-size: 11px;
	font-weight: bold;
#Tabs ul.TabsRow a.selected{
	color: #C0C0C0;
.List {
	border: none;
	padding: 0;
.ListItem {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: arial;
	font-size: 12px;
.ListItem li {

	margin-right: 0px;

<div id="Tabs">
	 <ul class="TabsRow">
	 	 <li>| <a href="#A" class="selected"><span>A</span></a> | </li>
	 	 <li><a href="#B"><span>B</span></a> | </li>
	 	 <li><a href="#C"><span>C</span></a> | </li>
	 	 <li><a href="#D"><span>D</span></a> | </li>
	 	 <li><a href="#E"><span>E</span></a> | </li>
	 	 <li><a href="#F"><span>F</span></a> | </li>
	 	 <li><a href="#G"><span>G</span></a> | </li>
	 	 <li><a href="#H"><span>H</span></a> | </li>
	 	 <li><a href="#I"><span>I</span></a> | </li>
	 	 <li><a href="#J"><span>J</span></a> | </li>
	 	 <li><a href="#K"><span>K</span></a> | </li>
	 	 <li><a href="#L"><span>L</span></a> | </li>
	 	 <li><a href="#M"><span>M</span></a> | </li>
	 	 <li><a href="#N"><span>N</span></a> | </li>
	 	 <li><a href="#O"><span>O</span></a> | </li>
	 	 <li><a href="#P"><span>P</span></a> | </li>
	 	 <li><a href="#Q"><span>Q</span></a> | </li>
	 	 <li><a href="#R"><span>R</span></a> | </li>
	 	 <li><a href="#S"><span>S</span></a> | </li>
	 	 <li><a href="#T"><span>T</span></a> | </li>
	 	 <li><a href="#U"><span>U</span></a> | </li>
	 	 <li><a href="#V"><span>V</span></a> | </li>
	 	 <li><a href="#W"><span>W</span></a> | </li>
	 	 <li><a href="#X"><span>X</span></a> | </li>
	 	 <li><a href="#Y"><span>Y</span></a> | </li>
	 	 <li><a href="#Z"><span>Z</span></a> | </li>

<div id="Tabs" width="100%" height="100%" >
<div class="tabbedWindow" id="A"  style="border: none !important;"></div>
<div class="tabbedWindow" id="B"  style="border: none !important;"></div>
<div class="tabbedWindow" id="C"  style="border: none !important;"></div>
<div class="tabbedWindow" id="D"  style="border: none !important;"></div>
<div class="tabbedWindow" id="E"  style="border: none !important;"></div>
<div class="tabbedWindow" id="F"  style="border: none !important;"></div>
<div class="tabbedWindow" id="G"  style="border: none !important;"></div>
<div class="tabbedWindow" id="H"  style="border: none !important;"></div>
<div class="tabbedWindow" id="I"  style="border: none !important;"></div>
<div class="tabbedWindow" id="J"  style="border: none !important;"></div>
<div class="tabbedWindow" id="K"  style="border: none !important;"></div>
<div class="tabbedWindow" id="L"  style="border: none !important;"></div>
<div class="tabbedWindow" id="M"  style="border: none !important;"></div>
<div class="tabbedWindow" id="N"  style="border: none !important;"></div>
<div class="tabbedWindow" id="O"  style="border: none !important;"></div>
<div class="tabbedWindow" id="P"  style="border: none !important;"></div>
<div class="tabbedWindow" id="Q"  style="border: none !important;"></div>
<div class="tabbedWindow" id="R"  style="border: none !important;"></div>
<div class="tabbedWindow" id="S"  style="border: none !important;"></div>
<div class="tabbedWindow" id="T"  style="border: none !important;"></div>
<div class="tabbedWindow" id="U"  style="border: none !important;"></div>
<div class="tabbedWindow" id="V"  style="border: none !important;"></div>
<div class="tabbedWindow" id="W"  style="border: none !important;"></div>
<div class="tabbedWindow" id="X"  style="border: none !important;"></div>
<div class="tabbedWindow" id="Y"  style="border: none !important;"></div>
<div class="tabbedWindow" id="Z"  style="border: none !important;"></div>
<div class="waste"></div>

Write a simple JQuery function to add a click event:

$(function () {
	var tabContainers = $('div#Tabs > .tabbedWindow');

	$('div#Tabs ul.TabsRow a').click(function () {
	     $('div#Tabs ul.TabsRow a').removeClass('selected');
	     return false;

Write a FilterData() function to:

  1. Get the required list of the site URLs from the List using SPAPI_Lists JS API.
  2. Write logic to keep only 5 links in one column. Also put the results in an appropriate HTML table.
function FilterData(hash){

    listname = Config.ListGUID;

    var indexValue=hash;
    var index=indexValue.split("#");
    var SiteURL=window.location.protocol + "//" + + Config.SiteRelativeURL;
    var lists = new SPAPI_Lists(SiteURL);

    //Create your CAML query to get siteURLs

    QAMLQuery = "<Query><Where><Eq><FieldRef Name='Index' /><Value Type='Calculated'>"+index[1]
+"</Value></Eq></Where><OrderBy><FieldRef Name='Title'/></OrderBy></Query>" var items=lists.getListItems( listname, // Name/ GUID of your list '', // view, here nothing QAMLQuery, // query '<ViewFields/>', '', // row limit '' // Query option ); var targetDivIndex = $("div"+hash); targetDivIndex.html(""); if (items.status == 200) { var rows = items.responseXML.getElementsByTagName('z:row'); //Got the required results// //Now let’s write some logic to wrap our results in HTML// //and to keep only 5 site URLs in one column. This way our UI won’t suck!// var html="<table class='List'>"; html=html+"<tr>"; var Counter=rows.length; var noofColumns=0; var noOfRows=5; for (var i = 0; i < Counter; i += 5) { noofColumns++; } for (var irow=0; irow<noofColumns*noOfRows; irow+=noOfRows) { html=html+"<td class='ListColumn'>"; var html=html+"<ul class='ListItem'>"; for (var irows=0; irows<noOfRows && irows<(Counter-irow) ; irows++) { var count=irows+irow; var row1=rows[count]; var fullname = row1.getAttribute('ows_Title'); if(fullname!=null) { //Get value of column SiteURL var UrlwithName=row1.getAttribute('ows_SiteURL'); var UrlOnly=UrlwithName.split(","); html=html+"<li><a href='"+UrlOnly[0]+"'>"+fullname+"</a></li>"; } } html=html+"</ul>"; html=html+"</td>"; } html=html+"</tr>"; html=html+"</table>"; targetDivIndex.append(html); } else { targetDivIndex.append('No Presidents'); } }

That’s it! Let’s put this script in a Content Editor web part to see the results.


Voila! You have your Alphabetical Menu ready!

Pretty cool and straightforward, right!

For your convenience, you can download the source code here.

Before using, just change the list GUID and the site relative URL of your list as shown below:

<script type="text/javascript">
     // *** Customizable parameters ***//

     var Config = {
         // LIST GUID of our Custom list 'Site URL Repository'//
         ListGUID: '{862A85A0-6CF7-4ED1-A9C4-5376E569C0EB}',

         //Sharepoint relative url where 'Site URL Repository' resides//
         SiteRelativeURL: '/test',
Next Steps
  • For creating an Alphabetical jQuery Menu download the code here!

sql server categories

sql server webinars

subscribe to mssqltips

sql server tutorials

sql server white papers

next tip

About the author
MSSQLTips author Shishir Bhandari Shishir Bhandari

This author pledges the content of this article is based on professional experience and not AI generated.

View all my tips

Comments For This Article

get free sql tips
agree to terms