SharePoint's built-in navigation appears to create a <ul> inside of a <div>, but the id on this inner <ul> appears to change between pages.

In the two below screenshots are examples of the same built-in navigation, but on different pages (notice the id's are zz10_RootAspMenu vs zz11_RootAspMenu).

Example with zz10...

Example with zz11...

I am attempting to make an add-in that can target and replace this <ul> with my own custom menu.

Any idea how this zz___ id is determined and whether there are other variations that can be seen? Is this a good id to use as a hook for my Javascript or is there something else that may work better?


Instead of targeting the exact ID, you can look for IDs ending with _TopNavigationMenu or _RootAspMenu.

If you're using CSS you can access the <ul> via CSS selectors:

/* ul whose id is ending with "_RootAspMenu" within a div
   whose id is ending with "_TopNavigationMenu" */
div[id$=_TopNavigationMenu] ul[id$=_RootAspMenu] { color: pink; }

In case you use JavaScript / jQuery there is also such an "ends with selector":

$("div[id$='_TopNavigationMenu'] ul[id$='_RootAspMenu']").css("color", "pink");

I would not suggest to hook this ID=zz10_RootAspMenu in your JavaScript. SharePoint has its own internal way to generate IDs.

I had an experience where I was trying to hook the DIV above this UL which you are trying access. But on different environment which had an update, was generating different ID.

So do not use SharePoint generated ID which has tendency to change as a hook, to get things done.

Instead the best practice would be to, open up your master page and place another DIV with your own UniqueID around the UL or it's parent DIV. Then use this DIV with UniqueID as a hook in your JavaScript. See the reference JS below

var i = 0;
var ul = null;
jQuery("div#YourDivId ul").each(function () {
    if (i == 1) {
        ul = this.id.toString();
        return false;
ul = jQuery("ul#" + ul);

Similarly you can go through Mega Menu On Sharepoint 2013

  • 1
    Or just use a suffix matching selector in CSS or jQuery to avoid modifiying a whole maste page just for this – Robert Lindgren Oct 12 '15 at 9:10
  • @RobertLindgren: Yep thats a better approach if you want only this to be achieved rather than unnecessary updating Master Page and an overload of JavaScript. But if you already have a custom master page and many changes have been done and already maintaining a JavaScript, then this approach can be useful. – Asad Refai Oct 12 '15 at 9:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.