Introduction

In my last post I talked about making the SharePoint navigation render in a Bootstrap friendly way. I suggested that you could do this by changing the markup of the navigation using an ASP:Repeater to display the nodes. This works great if you’re on an on-prem environment but on Office 365 you cannot use this method because the masterpage cannot contain code blocks. If you haven’t read that it might be worth taking a look at – Bootstrap Responsive Navigation in SharePoint .

This post will demonstrate an Office 365 safe version that use JavaScript, jQuery, and REST to retrieve the navigation from SharePoint’s navigation provider. Once we have that we’ll render that out to the screen client side. With this approach we can use the out of the box Managed Meta Data navigation provider for the navigation, and we can control the exact rendering so that it fits Bootstrap’s model for a navigation bar.

The code can be downloaded directly from my git-hub account – https://github.com/tom-daly/sp2013-bootstrap-nav

Getting Started

It’s very simple to get started you only need to do a few things.

  1. Add the link to the topNavigation.js in your SharePoint masterpage

  1. In the Master Page, add the container below where the navigation will be pushed into. You will need to determine where you want the navigation to go, I’ll have a full example at the very end.

  1. Switch the SharePoint Navigation to use the Managed Meta Data Navigation
    1. In Site Settings
    2. Look and Feel -> Navigation

Once you complete those steps you’ll have your navigation displayed in that container.

Other Details

Changing Rendering

The rendering of the menu is defined in the renderNavigationNodes function. This is currently the format the Bootstrap likes. If you visit the Bootstrap website and take a look at the first example

http://getbootstrap.com/components/#navbar

The red box is exactly what the code is injecting. So you would wrap all that however you want it to appear. Follow the examples there are plenty out there.

2 Level Flyouts

Currently this supports only 2 levels, a top level and 1 flyout. This is just what Bootstrap v3.3.5 supports and that’s what I’m sticking with currently. If you want more levels then it’s up to you to figure that part out. It can be done and there are other 3rd parties implementing 3rd or 4th level flyouts after the fact. The code is recursive and will support as many levels as you have, you just need to handle the front end portion.

The REST Call

The query that I am using can be seen below. The /web/navigation/topbar endpoint – flat out sucks. It won’t show if a node is hidden and it didn’t behave. This is the only one I could get to work reliably.

Changing Target Container

If you want to change where the navigation goes, instead of “#my-top-navigation” then you can edit the topNavigation.js file and at the bottom change the selector to another ID preferably.

Sample Files

I have a few more sample files that might be of use to look at.

Base.css – Sample CSS file (helps with some Bootstrap/SharePoint resets)

Bootstrap.Master – Sample masterpage used in this example. In this sample I create my own header and not s4-titlerow. Using this html structure you’ll get the collapsible navigation that is popular on most web sites.

Conclusion

The whole goal of this script was to have a way for an Office 365 site to use the Bootstrap navigation. Although there are still limitations it’s doable. And you don’t even necessarily need to touch the master page. You could attach the scripts and css via other methods which I won’t go in to. So if you’re an Office 365 purist who doesn’t want to customize the master page you would want to take an approach to this. I hope this helps someone out there. If there are problems with the script you can report the issues through the github page. https://github.com/tom-daly/sp2013-bootstrap-nav/issues

Comments
  • Navin
    Posted at 1:21 pm October 31, 2017
    Navin
    Reply
    Author

    Tom, Can you post the end product of this code.

  • Nick
    Posted at 6:36 pm August 17, 2017
    Nick
    Reply
    Author

    Hii.. thanks for sharing.. may I take a look on how did you do in the master file?

  • Matt Rutledge
    Posted at 7:27 pm July 17, 2017
    Matt Rutledge
    Reply
    Author

    I noticed that the Sample Files links require authentication into a SharePoint site. Is there a public link to these files? Much appreciated.

  • pja
    Posted at 7:16 pm February 24, 2017
    pja
    Reply
    Author

    Hello there, I followed the instructions above and got it working on the first try on our 2013 site. Thank you for this.

    While everything looks great, I did notice an issue. I have a top level menu item of “Products”. Clicking on that opens the menu and displays “Product A” and “Product B” which are child terms beneath “Products”. This is correct as defined by my term store. The friendly links of the two products in the menu should be “/products/product-a” and “/products/product-b”. Instead, the hyperlink is being rendered as “/product-a” and “/product-b” respectively, which results in 404s. Do you have any thoughts on why this might be happening?

    Thanks

    • Tom Daly
      Posted at 7:56 pm February 24, 2017
      Tom Daly
      Reply
      Author

      Thanks for the feedback. The script is looking for the Simple Link. let me see if the Friendly link is available and i’ll let you know.

    • Tom Daly
      Posted at 8:58 pm February 24, 2017
      Tom Daly
      Reply
      Author

      I’ve recreated what you’ve described and I can see the issue that you are reporting. I am working on a fix at the moment.

    • Tom Daly
      Posted at 9:16 pm February 24, 2017
      Tom Daly
      Reply
      Author

      I believe that it’s fixed. Please update the script with the latest version v0.4 https://github.com/tom-daly/sp2013-bootstrap-nav

      If you find another issue with the code please report it on github.

      thanks again for using and getting back to me! I appreciate it.

      • pja
        Posted at 4:06 pm March 2, 2017
        pja
        Reply
        Author

        Great – thanks for the quick response! I will download and if I run into any issues, I will post on github.

  • Leave a Reply to Matt Rutledge
    Cancel Reply