SharePoint 2013 Cross-Site Collection Global Navigation with Mobile-Friendly Responsive Hamburger Menu

Author by Steve Borgwardt

As most experienced SharePoint users have found with every version of SharePoint, providing a consistent navigation across all site collections and web applications was extremely complex and a challenge. 

globalnav_thumb.pngWith the introduction of SharePoint 2013, it seemed like this problem would be solved using Managed Navigation with Managed Metadata. Unfortunately, Managed Navigation is still limited to one site collection, preventing consistent cross-site collection or web application navigations.

Since the launch of SharePoint 2013, there have been a few solutions utilizing the term store to create the global navigation and reference some JavaScript code in the master page to allow the managed navigation to work across site collections.  This approach is great in some scenarios since it uses the standard capabilities of SharePoint and doesn't require a farm solution to be deployed, however there are still some limitations to that approach including the lack of secured navigation menu items and the fact that managed navigation doesn't apply to sub sites automatically.

The major limitation is that managed navigation can't be secured or targeted to a specific security group, so all users will see the menu items.  In some cases, this may be fine, but can present a problem for security conscious organizations.  This is where our global navigation solution offers another benefit providing security trimming on the menu based on existing SharePoint security permissions.

Concurrency has developed a SharePoint 2010, 2013 on-prem solution that solves all the issues of the out of the box SharePoint top navigation by replacing it with its own implementation that supports sharing navigation items across site collections and web applications in the farm.  The solution allows groupings of navigation items that are known as a 'partition' in the administration page which supports sharing and versioning of the partitions across site collections or web applications.

Along with the ability to cache the menu items for improved performance, it also applies a user centric view to the menu which includes security trimming based on existing SharePoint security permissions and inactive nodes that have been disabled in the configuration detail page.

The solution utilizes the existing SharePoint menu, allowing any existing customization to the style of the menu already implemented on your site.

In addition to the feature of global navigation, we also have developed a SharePoint-hosted Add-in that is easily installed in the add-in catalog (formerly know as the SharePoint app catalog)  that will apply styling to the SharePoint menu to produce a responsive, hamburger menu (i.e. three line menu icon) improving the UI and UX for users.

The SharePoint add-in provides all the necessary asset files and references to jQuery, Bootstrap and CSS styles to generate the menu.

Global Navigation Solution

Here are some screenshots of the Global Navigation solution configuration pages accessible as a link from the Site Collection Administration menu. We have deployed this solution for many clients on both SharePoint 2010 and 2013 on-premise installations.

Configuration Detail UI: Provides the ability to configure cache settings

image_thumb-7.png

 

Configuration Detail: Partition structure and creating nodes in the configuration utility

image_thumb-8-(1).png

image_thumb-9.png

 

Versioning:

image_thumb-12.png image_thumb-11.png

 

Import/Export XML Sitemaps: Ability to import and export the global navigation using industry standard native ASP.NET XML sitemaps

image_thumb-13.png

 

Mobile-friendly, responsive Global Navigation Menu: - When the site is viewed on a mobile device or the page width changes, the SharePoint top navigation menu adjusts into a "hamburger" style menu.

image_thumb-18.png         image_thumb-17.png

Interested?

If you would like a demo of this or would like to inquire about implementing this Global Navigation solution in your organization, please contact us for more info.

Author

Steve Borgwardt

Senior Application Developer

Tags in this Article