I would like to make a customized the top navigation bar with mouse hoover and dropdown.

The list is all sites that person have access too in that site collection.

Since some people have access to quite a lot of sites, I hope I could achieve this with async client side code, so the user don't have to wait for the list to be populated.

In this format:

My sites

  • Site 1
  • Site 2
  • Site 3
  • Site 4

Do anyone have some tips how I can achieve this? Like where I should put my code? Could I have achieved this with OOTB functionality? Or other information that can lead me to my goal will be appreciated.

1 Answer 1


You can try to use the Javascript Client Object Model for the same. Since you want to have it in the top navigation, that means it will be available in all the pages, so you can simply write the html inside the masterpage in the top navigation area

function loadSites()
    var context = new SP.ClientContext.get_current();
        var web = context.get_web();
    this.sites = web.getSubwebsForCurrentUser(null);
    context.executeQueryAsync(Function.createDelegate(this, this.onSuccess),Function.createDelegate(this, this.onFailed));

In the success method, you can iterate though all the items returned and build html to show in top menu. Please note that the getSubwebsForCurrentUser method will return all the subsites in the current site where user has access.

Hope it gives you some idea to proceed.



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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