Bootstrap Navigation for Office 365 & SharePoint 2013 using jQuery and REST

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

Advertisements