Superfish drop-down menu – built from a SharePoint list

12.01.2012 Updated to v1.4 to support anonymous access as requested by Brett Anderson.

I got this request from Larry:

Hey A,
I have a good request for you. I would like to build a menu structure using a SP List. JQuery has a plugin called Superfish looks like it can create a great menu structure with multiple levels. If the menu items could be maintained in a list that would make it easier for the enduser to maintain it.
Let me know what you think.

The solution

This solution creates a menu structure that can be used with the Superfish solution, created by Joel Birch.

The menu structure is created in a standard SharePoint list. This list can hold multiple separate menus as the individual menus are identified by a “token” in the “MenuID” field.

The list that holds the menu structure can be placed in the current site, or in the root site if you want to share it between multiple sites. This list is automatically created when you first run the script:

Sample menu structure


Sample menu

You can style the menu by changing the file “superfish.css”.

Get all the files

Go here and get the superfish files

Upload all the files to a document library, or put it in a folder on the root of your site with SharePoint Designer. I have referred only the file “superfish.js” in this CEWP code example, but read the instructions on the superfish site to learn how to use the “hoverIntent.js and the other files included in the package.

In addition to these files, you will need the latest jQuery release – you find it here.

Get the latest version of “spjs-utility.js” from here. Ensure you use the one published November 6, 2011 or later.

Get the latest version of “SuperfishForSharePoint.js” from here.


Add this code to a CEWP where you want the menu to appear:

<style type="text/css">
.sf-menu li {
#menuPlaceholder a {
<div id="menuPlaceholder"></div>
<link rel="stylesheet" type="text/css" href="/test/Scripts/SuperfishForSharePoint/Superfish/css/superfish.css" media="screen">
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="/test/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript" src="/test/Scripts/SuperfishForSharePoint/Superfish/superfish.js"></script>
<script type="text/javascript" src="/test/Scripts/SuperfishForSharePoint/SuperfishForSharePoint.js"></script>
<script type="text/javascript">

var argObj = {menuID:'MyMenu',


You must change all the file path’s to reflect your local copy of the files.

Parameters explained

  • menuID: The menu identifier – used to separate the links from each individual menu.
  • listBaseUrl: The relative URL of the site where the “SuperfishForSharePoint” list resides. Use an empty string “” if you plan to have the list in the root site. The variable L_Menu_BaseUrl is provided by SharePoint and reflects the current site.
  • orderBy: The column used to order the menu items. Use “Title” for alphabetical ordering, or “SortOrder” to use the field “SortOrder”.

Please ask if you have difficulties.


140 thoughts on “Superfish drop-down menu – built from a SharePoint list”

  1. This is great! I’m looking forward to trying it out.
    This would be perfect for Global Navigation in the top nav bar.
    I’ll try and get this working for SP2010 Foundation, starting with adding the CEWP code to the MasterPage and see how it goes.
    Excellent Job Alexander!

  2. A little confused here Alexander,
    listBaseUrl: What do I need to have here?:
    ‘ ‘ or ‘/lists/SuperfishForSharePoint’ or L_Menu_BaseUrl ?
    I’ve tried multiple variations, the List is created but the menu doesn’t show.

    1. Hi,
      This is the relative URL of the site where you want the list created.

      If you are on the root site, the property “listBaseUrl” should be “”,

      If you are on this URL: and would have the list in the current sub site “tech”, the variable “listBaseUrl” should read “/tech”.

      If you are on a subsite, but want the list to be created on the root, leave “listBaseUrl” as an empty string “”.

    1. Yep, I had the same problems with JQuery 1.7.1 and reverted back to 1.2.6 and it worked fine. Do you plan to update the script to work with the latest version of JQuery?

    2. Hi,
      I haven’t had the time to research this issue, but it seems kind of “global” for all my solutions. I’ll let you know when i have looke into it – in the meantime, use jQuery v1.6.4.


  3. Hi Alexander. This menus looks fantastic. I am just having some problems trying it on sharepoint 2007. The script was able to create the list, but for some reason, the _parent field was missing. I created it manually though. The only problem is that is seems to be not getting the 3rd level of the menu. I think there is something related to the formula I used on the _parent field.
    Any thougths here to help?

    Again, thanks in advance for this great script

    1. Hi,
      Strange – I had tested it (and did it again now) in SP2007 (WSS 3.0) without trouble.

      The _parent column is only used to help selecting the correct item (through concatenating the MenuID and the link title).

      The lookup column “Parent” can lookup in the “Link title” field without the _parent column.

      send me some screenshots so i can take a look.


    2. Hey Alexander, thank you very much… I’ve changed the lookup as you said and now it is working. But this is even stranger: it only works if the link text field starts with the char T. I still looking to the script to see where I am missing something here

    3. Wow! Just figured out. My root menu level was named Release. Then, the script would render only link text starting with characters over R, like T, in alphabetical order.
      I renamed my root level menu to ARelease, then it started showing the second level BTeste and the third level normally.

  4. Hey A, Finally getting around to test this. Not sure if I missed something. I get the prompt that list is missing, Do you want to create it, but that is as far as it goes. every time the page loads I get that prompt. In SP 2010. I’ve updated my paths by using a right click on the file and “copy shortcut”. I also tried a new version of jquery. I have closed the page and reopened, but only get the first prompt to create list. Any ideas?

    1. Maybe I spoke too soon. I was all working up until I finished adding some menu items. I revisited the page and nothing is displaying. I have checked and rechecked src links, everything appears to be in order.
      when I alert(argObj); i get [ object object]. not sure what I missed. Any suggestions?

  5. Pedro, I’m having the same issue. The 3rd level fly-out wasn’t working, then placed a Z in front of the 2nd Level menu item, the 3rd level fly-out works…!

    1. Indeed it fails due to some trouble withe the sort order. When iterating through the items, the parent menu is not yet created and thus the sub menu has no place to append to.

      I’ll come up with a solution and repost the code. Stay tuned for the update.

      Thanks to Pedro for finding this bug!


    1. Still trying to test it. Though looks like at first it was working for one menu item, then it’s not working for others… Need to clear the list and start again…

    2. Update: Still encountering some problems, some 3rd level flyouts work, some don’t. Add a _parent menu option to a working flyout and no fly-out. Same problem using Firefox, so it’s not the browser. Will test further over the weekend.

  6. Hi all,
    I believe the problems with the missing sub menus should be fixed in v1.2.

    Could Pedro or Brett please test it and post back here?


    1. Works perfectly! Updated the SuperfishForSharePoint.js file and the menu works. It even does 4th Level menus. Great work Alexander!
      One thing I would like to add is another column to open a menu item in a New Window? Yeah I know I’m a pain. 🙂
      Cheers, Brett

    2. Hi Brett,
      v1.3 adds an open in new window option, but to those already using the solution you must add the field to the “SuperfishForSharePoint” list manually. The field is of type “Yes/No” and has the name “OpenInNewWindow”.


  7. I unzipped all of the files into a single folder and updated all of the paths in the code above. My page does not display anything. Is there anything else I need to change in the javascript files. How and when does the list get created? I also do not have the list created when I loaded the page with the java script references and code above. Can you clairfy the steps you need to take? Than ks

    1. Hi,
      If you get nothing, I suspect the script path to be wrong. Please double check. If you still get nothing – send me some screenshots of your setup and I’ll take a look.


  8. If you want to use the list for multiple menus, where do you put the additional menu ID in the CEWP? Do you have to create a separate CEWP link text file for each separate menu?

    1. Hi,
      Sorry for the late reply.

      I have not designed this to support multiple menus in the same page. The comment on using the list for multiple menus refers to multiple pages with different menus.


  9. Hey A, Hope you’re well. I am playing with this script. It’s working. My issue is a menu alignment. I tried looking on the superfish site, but it was limited. I have a vertical menu. I am trying to align all the levels or atleast close the gap. I want level 2 to have a small indent after level one. no matter with margins or padding I add or change I am unable to align these items.

    Any suggestions?

    1. Hi,
      Sorry, but I have not used this myself. Try inspecting the menu using Firebug or IE dev toolbar and see what styles that are applied. It’s not unlikely that SharePoint messes with the superfish css and that you must override some built in styles, or maybe use “!important” in the css to make it stick.


  10. Works great thanks Alexander!

    Just one issue, the menu overlaps in the pop-up sharepoint 2010 light box. is there a way to stop it over lapping ?


  11. Hi There

    I have installed the script in a txt file and linked it to a CEWP.

    I have added all the files onto my server and replaced all the paths to these files.

    Went back to my site, but nothing happens.

    Am I missing something?


  12. Hi, this is just what I needed, I’ve uploaded all the files, added the CEWP and changed the paths, when I load the page it says the list is misssing do you want to create it, after selecting yes nothing happens. Reload the page and the same thing happens over again. This is in Sharepoint 2007. Any help gratefully recieved.

    1. Thanks for the replies, I’m not quite sure what you mean by a managed path. I’m on a works network and MOSS runs on a server farm so the link is http://FarmName/Collection/site/default.aspx . I did try manually creating the list in the site but it didn’t pick it up. Also hitting F12 does not bring up the developer tools, I think that must be disabled on this system.

    2. Hi,
      I loaded a virtual machine with IE 6 to test and have no problem at all. I’m afraid I have no clue to what could be wrong, sorry.


    3. I’ve had a bit of a play and this is the line that isn’t working: list = spjs_AddList(‘SuperfishForSharePoint’,argObj.listBaseUrl,’Stores the menu items for the superfish menu.’);

      The if(list.success) that follows is false so nothing further happens

    4. Try changing line 37 in “SuperfishForSharePoint.js” like this:
      [sourcecode language=”javaacript”]

      This should give you the error returned by SharePoint.


    5. Sorry, but I cannot think of anything else than adding alerts in the spjs_addList function to try to pin down what is wrong.

      You could also try to uncomment this lines:
      in the function “spjs_wrapSoapRequest” as you may get the error message from there.


    6. I think we may be geting to the bottom of it, when I uncomment those lines xhr.status = 0 and throwError = No Transport I presume this is caused by a reference pointing outside of my domain which is causing the problem?

    7. I was assuming that that was the case as that seemed to be what a No Transport error seemed to refer to. Although I am not a Javascript wiz so I have probably got it wrong!


  13. Alexander, Thanks very much for you help, I’ll contine to have a play in a quite moment and see if I can get to the bottom of the problem

  14. Alexander I notice if a full URL in the SF list is used SharePoint alternate access mapping does not work, but if a partial URL is used then it does. Is there a way to get the full url to accept alternate access mapping?

  15. Alright, hate to ask, but maybe some of you can answer my question here. I have installed the menu on my Sharepoint 2010 and everything works. Looks lovely except that I can’t seem to get it out of “list” view. I don’t have any of the graphics loading for the menus so it is just a nice ul type list that responds to hovering by revealing the rest of the listed items. Nice, but not the graphical look I was expecting. What am I doing wrong? It’s almost as if it is not reading the css file at all….

    1. Hi, I’m almost certain you have referred the css wrong, or you are missing some files. Do you have the folder structure with separate folders for css, js and images?


    2. lol – okay figured it out. It was not “almost as if it is not reading the css file”. It was not reading the css file. I copied the css statement exactly from the superfish site and it started working… Now if I could just get the z-index to supersede (be on top of) a dataview. No matter what number I put, the dataview webpart is always on top.

  16. In SP 2007/IE9 environmet my SuperfishForSharepoint list is created but without any columns:
    Step1. Pop up window: “..list is missing…->OK
    No step 2, no pop up window “the list is created”


    List is created (exist under Site Libraries and Lists) but just with default columns (Item, Created,Created by..)
    Any idea what might be wrong?

    1. After just rearranging location of folders and files, answering my own question:

      please be aware of your folder hierarchy and specific location of all files in your document library, in my case this specific location of files did the trick:

      doc lib: [script]
      – folder: [spjs-utility]
      – folder: [SuperfishForSharePoint]
      -Folder [Superfish]
      – Folder [css] – -> incl all downloaded Superfish files
      – Folder [image] – -> incl all downloaded Superfish files
      – Folder [js] – -> incl all downloaded Superfish files

      my example:


      No need to update or adjust listBaseUrl:

  17. Thanks again Alexander,

    Works very nicely. Do you know of another plugin that can render this kind of parent-child node list as a simple treeview or cascading accordian list ? i.e. more like the quick navigation than the global navigation.


  18. It works great! Wonderfull job!

    There’s just one problem i keep having, my browsers (IE,FF,CH) all crash on the SuperfishForSharepoint.js file when trying to open an administrative page after i place the menuPlaceHolder div next to the default sharepoint menu.

    Normal pages work fine and the menu shows but administrative pages keep crashing my browser. Do you have any idea what could cause this problem?

  19. Hi Alexander,

    I love your solutions. Unfortunately, the Superfish for SharePoint solution in my environment doesn’t render any submenus, only the top level. Do you have any idea why this may be occuring?


  20. Hi,
    Nice post 🙂

    You have explained the post for top-bar navigation. I have to build the same 2 level drop-down menu as a web part in the right side of the body-area of the Sharepoint 2010 site[where currently a picture appears].
    You help will be highly appreciable as its kinda urgent work!

    Thanks in advance!

  21. Hello Alexander,

    thx for this excelent article !! Everything works as expactet also with SharePoint 2013.
    Extrem good work men:)

    best reguards
    Joerg Bussmann

  22. Thanks for sharing your great work here. I really appreciate it.

    I am trying to put multiple menus on the same page. I know you said you didn’t write it to do that, but is it possible? How hard would it be to do this?

  23. Hi Alex

    You have written really very good blog regarding customization of Menus which are coming from SharePoint List with JQuery!

    I followed all steps and it is working but facing one issue!

    SharEPoint 2007

    1. Menu and submenu are coming
    2. colors are coming

    Menu are displaying in Vertical order – tried Z-index solution but not working!

    Would you please let me know why this issue is coming?

    Disha Shah

  24. Hi Alexander,

    Awesome write up here but I’m slightly stuck.

    Current Setup:
    Sharepoint 2010 Enterprise

    Files Uploaded:

    I have a CEWP with the code you have lised above.

    When i create a new ‘Web Part Page’ and add the CEWP (changing the SRC references to point to where I uploaded the files) I get the mesasge about wanting to create the list this references and then a confirmation saying list created do I want to go there now to insert data. I go to the list, insert some data and flick back to my web part page.

    Here I can only see the header of the CEWP, no menu is being displayed.

    Am I doing something wrong here? Do i need to amend anything else bar the SRC URL’s to the css and js files?

    Any help you can offer would be gratefully appreciated!

  25. Hi Alexander, I am having a bit of trouble getting this to work in my WSS 3.0 site. All the files seem to be correctly addressed and I downloaded the latest versions of everything. I was asked to set up the menu file as expected and entered a few menu items. These appeared in the expected place, with some CSS styling. However I don’t have any drop down arrows (and so no flyouts/dropdowns), and I can’t get the menu items to appear side by side. Links and hover hints work. Do you have any advice for a struggling user?

      1. Hi, I think that the CSS is referenced as I can change the fonts, sizes, backgrounds etc by changing the CSS file. I just don’t have the arrows or drop downs/flyouts. Also if I reference another CSS file I get the unordered list. I am using the superfish.css downloaded from the superfish site.
        The root items appear as a vertical list in the expected position, I would like to have it as a horizontal list and enable the dropdowns.
        Any help you can give is much appreciated,

      2. Hi Alexander,
        I think I have the problem, which possibly lies with the superfish.css use of ‘content’ and an IE8 browser. According to “IE8 only supports the content property if a !DOCTYPE is specified.” and WSS 3.0 master pages don’t have a !DOCTYPE specified. I’m not sure if there is a pure CSS solution or if I need to stick a !DOCTYPE statement on the page?

      1. Hi Alexander,
        It works perfectly in Chrome, with CSS arrows, the correct formatting and dropdowns and flyouts appearing – beautiful! For IE8 I have tried putting a !DOCTYPE statement in the masterpage, this gets a little nearer in that the titles are side by side (I have included the superfish-navbar.css) and the dropdowns and flyouts appear, but still no arrows and the flyouts close on mouseover so rapidly that anything but the first item is unobtainable (and the first takes practise). However !DOCTYPE affects the formatting for the rest of the page and might not be acceptable.

      2. Hi,
        I guess the problem is related to SharePoint forcing “quirks mode” in IE – effectively dropping the css functionality to IE6 mode. I’m afraid I do not have any solution for you, but you can try the superfish site to see if there are any method of making this work in IE6.


      1. No, sorry. I identified it as the CSS and Alexander seems to be correct about the IE6. His suggestion about looking on the superfish site led me to stump the panel, where there seemed to be some good ideas but I haven’t chased any of these up yet.

      2. Any solution, anyone? I’m experiencing the same thing. Chrome – beautiful. IE10 . . . horrific. Glad to hear I’m not alone. Thanks in advance.

  26. .sf-menu li {
    #menuPlaceholder {

    var argObj = {menuID:’MyMenu’,


    So far I am able create the list with script and created items for the navigation in the list. But nothing is displaying as a menu. what Im doing wrong.
    I copied the above code in the master page and copied the below code below the navigation content placeholder. I also create the list item

    jQuery(document).ready(function() {

    I really appreciate your help.

      1. Thanks Alex,

        Its showing object expected error on
        getSuperfishMenuData(argObj); not sure why. I checked all the .js file and css file everything is linked. Any Idea?


  27. Alexander,
    This is a great solution. Thanks for putting it together and documenting it. I am seeing one thing that I had a question about. I dont see it referenced in any of the discussions. IE9, Sharepoint 2010.. The first time you hover over a parent the 3rd level flyouts appear before you hover on any of the 2nd level dropdown items. Subsequent hovers it works as expected. Any advice is greatly appreciated.


  28. Hi Alex,
    I am glad I found your page! Got this working well for my SP 2010 site. Question, my menus have alot of text and they did not wrap, which ends up creating another line of menus. This is problematic when there are submenu’s.
    Is there a way to turn on text wrapping for each nav menu item?

  29. Just an FYI to ppl using this and experiencing what we are experiencing.

    We had a problem where we would put the superfish menu on a page with a list view on it. A user would click add new item on the list and the superfish menu would hover over the new document form.

    So, this can be fixed by updating the css in the CEWP script from:

    .sf-menu li {


    .sf-menu li {

    The iframe that the holds the new form was set to z-index: 1504 (kind of an odd random number) so figured 999 might cover all the bases for those situations.

    Great easy way to create navigation still!

  30. What will be (if possible at all) modification to re-use menu and the same list (and the same menuID) on different page BUT starting from (example above) Sub2 (and ignoring parents, in above case Root1).

    I understand you can have diff MenuID in the same list but then you need to recreated Sub2->Link3 etc…

  31. Hi Alexander,

    I followed the above article and did this in my custom master page and referred the scripts in master page and it is working as expected. But, I am facing “site is not responding due to long running script” error notification in IE9.

    Can you please let me know what would be the reason for this.

      1. Hi,
        I’m sorry, but I am a bit short of time and don’t have the time to look into this right now. The best tip I can give is to use the developer toolbar in IE (hit F12) to look for clues.


      2. I went back in and re-installed all the files, and rebuilt the navigation items in the list. All is working now.

  32. I am suddenly running into an issue referencing the spjs_QueryItems function. (spjs_QueryItems is undefined). The function is in the spjs-utility.js file, however, it doesn’t seem that is getting loaded. My HTML is below. Any help with this is appreciated:

    .sf-menu li {
    #menuPlaceholder a {

    var argObj = {menuID:’MainNavigation’,


  33. Hello –
    1/ I get the dialog asking if I want to createthe list but it doesn’t auto create.
    2/ If I manually create the list, for the “link title” field I’m getting “null” not the menu item title text.
    Can you clarify what field types should be used? I’m assuming:
    MenuID Single line of text
    Parent Lookup (on link text)
    Link text Single line of text
    URL Single line of text
    Mouseover Single line of text
    Sort order Single line of text

  34. I left a question about the link text not showing but figured it out. I copied the field display names from this page to create the menu list, but checked the code and the field name is actually “LinkText”, not “Link text”.

  35. Great Utility Alexander,

    I have one question,
    SharePoint 2013 – IE 11 – Having problems (The list “SuperfishForSharePoint” is missing.)
    It works fine in Comparability mode, and any other browser. Do you have an idea why IE doesn’t like it?

    Thank you.

    1. Generally, IE11 does not behave all that good with SP2013 – which is kind of odd…

      Unfortunately I have not tested this solution in SP2013 and cannot shed any light on it for you, but try using the developer tools (hit F12) and try activating the “network traffic catching” – the “Play” button in the Network tab.

      Do you see anything “result” with 500, or anything other strange her or in the “Console” tab?


  36. This was working great in a 2010 site until the user got hold of it and started adding links. The pages would load up to the menu but then stop. Some of the urls were very long and it looks like were getting truncated. I removed them but still the pages won’t load. Is it possible the long urls corrupted something that prevents pages from loading.?
    I tested with a new menu id/name and all works fine so something is up with the original one which I can’t fix. And I can’t easily debug it because it never renders.
    Any ideas?

    1. Hi,
      Sorry for the delay. I personally do not use the solution and have not seen this error reported before.

      Try using the developer tools (hit F12 > Console) to see if there are some errors there.


      1. Thanks for responding. Apparently somebody made an item a parent of itself and that’s what caused the issue. Since it wasn’t rendering at all, I couldn’t debug the error. Good to know!

  37. Great Solution!
    Alex. Is it possible include in this solution a way to open any link in dialog box? For example a newform.aspx

  38. Hi,
    Unfortunately I do not have time to add this functionality to this solution, but you might be able to use something like this:

    Add this function to the SuperfishForSharePoint.js file:

    function openLinkInDlg(url){
    	var options = {
    	    "width": 700,
    	    "height": 800,
    	    "url": url

    Then try using this in the URL field in the setup form:



    1. OK – You must change the zIndex setting in the CEWP code example above (it is set to 9999).

      Unfortunately the dialogs and other SharePoint contents have a dynamic zIndex so it can be tricky to get it exactly right – use the developer tools in the browser to inspect the other elements on the page.


    1. Yes, this is caused by the menu to have to hight zIndex in relation to the built in SharePoint elements. You must lower the zIndex for the superfish menu. Try lowering the one in the CEWP code first, and if this is not enough, you must look for more zIndex settings in the CSS file in the superfish “package”.


  39. Hi Alexander Bautz,

    Firstly great solution and it works as expected. Can you please let me know how to change link color of selected menu link. Any idea ?

  40. Hi Alexander Bautz,

    Am running into issue under the windows 8 laptop. Using firefox this function spjs_Queryitems always goes into the if condition and never shows the menu’s.
    Under IE,Chrome this works fine.

    Can you help me out.


    1. Hi,

      It does not show any errors and the div ID menu is always empty And never appends the Html…

      When I debug the JS res.count is always -1 and never goes to else condition….have made sure I have list created and everyting is created but in firefox it never turns on (especially windows 8) version 40.0


  41. Hi,

    Am using version : 1.209 spjsutility and Jquery is 1.7.2.js…

    Am using custom master page and have multiple Jquery links on the page.Have put the navigatio links on the bottom of the page with the scripts referenced.


    1. Hi,
      I’m not sure if this is the problem, but in general it is not good to load jQuery more than one time in a page.

      If a solution has stored data, or added prototype functions to one instance of jQuery, and the namespace is overwritten, this info is lost.

      Remove all but one jQuery instance from the page and try again.


  42. Hi Alexander,

    Hope you are doing good..

    Am getting issue with navigation when using AAM on the site, is there any way we can fix that. When the page is loaded for first time it shows the menu but when I navigate to other pages it does not show up

    This scenario is only with IE browsers. Can you please help me out..


  43. One minor css bug on line 39 in superfish.css:
    .sf-menu a:hover, a:focus {
    background-color: #AED8ED !important;
    a:focus targets ANY link and adds the light blue background which could be undesirable.
    .sf-menu a:hover, .sf-menu a:focus
    fixes the issue.

  44. Hi Alex,
    I have gone through the comments and still I am getting nothing. I must be doing something wrong tried several things but still a blank page.
    I get the following error:
    The value of the property ‘getSuperfishMenuData’ is null or undefined, not a Function object

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.