Custom Navigation in App Webs

Of the things that I most dislike about app webs is the lack of support for navigation. There is no provision for a top link bar or quick launch and if you try to add items to the web’s Navigation collection you will get an error. Fortunately it is easy to create these menus with a little JavaScript.

Don’t Touch the Master Page

Like most folks in SharePoint land we use jQuery in Instant Legal Practice and Instant Consulting Practice whenever we need to change what SharePoint serves. We could have used a custom master page, but one of our guiding principles is to avoid such customizations of the host environment because an app that requires modification of global resources, like master pages, will not coexist well with other apps. Therefore none of our apps touch the master page and we always attack these sorts of problems in the client with script.

Know your URL

Generating a site’s navigation on the server has certain advantages. One is that SharePoint automatically produces correct links based on the web’s server relative URL. You need this information to do this work on the client, but figuring it out programmatically on every page load is inefficient. Therefore one of the things we provision when the user installs the app is a dynamically created JavaScript file that contains this sort of environmental information used throughout our scripts.

Getting the HTML and Making it Seamless

Although we go out of our way not to customize global resources we always want it to look like we did. Normal users should not be able to tell what is custom and what is not – we want everything to be seamless and feel like a natural part of the platform. Because of this, when we need HTML we almost always derive it from the original using Firefox or Chrome. Prior to IE 11, IE’s developer tools aren’t good for this task because the DOM inspector doesn’t show dynamic content and the menus are dynamic.

To get the HTML, simply select the element and copy the HTML to the clipboard.

Getting the navigation HTML with Firebug

This technique ensures that the resulting menu will look stock and will also respond to custom themes and design packages.

Putting it together

Once you have the HTML and the current web’s URL the rest is easy. Simply modify the HTML to include the desired menu items with a token for the web URL, replace the token with the actual URL, and insert the HTML into the page.

The end result looks like this:

The creation of the custom quick launch uses the same basic techniques.

Author: Doug Ware