You Are Here:   Megamenus Separator MegaMenu using SharePoint Global Navigation Separator MegaMenu using SharePoint Global Navigation

HTML Replacement Menu

One relatively easy approach is to replace the entire OOTB navigation element with a custom navigation menu. Easy is not necessarily good here, as evident by the considerable cons listed below. This might be appropriate for sites that don't change often with few considerations of security. For example, a public facing website would be the best candidate for this simplistic approach. There are many downsides for an Intranet.

The basic steps consist of the following:

  1. Edit the SharePoint masterpage
  2. Remove (hide) the default navigation control (<SharePoint:AjaxDelta id="DeltaTopNavigation" ...>)
  3. In its place, insert HTML markup for a MegaMenu of your choice
    1. This would be a combination of HTML, JS, and CSS.
    2. There are many examples on the web if you're not inclined to build your own

Pros:

  • Quick and easy to implement from a developer's standpoint
  • Highly customizable
  • If masterpage is sync'd among site collections, users alwayshave a consistent navigation experience

Cons:

  • Difficult to maintain
    • Typically more experienced users are required to do so
    • Must update navigation (masterpage) in all site collections for consistent navigation
    • New sites are not added automatically
  • Security trimming / audience features are lost

Since this method simply uses plain HTML, very sophisticated menus can be created:

megamenu_html.jpg 

List-Driven HTML Replacement Menu

Consider the previous HTML Replacement example. We're now taking that concept one step further. We're still replacing the OOTB navigation control with custom HTML markup, however now the actual navigation items will come from an external source. Let's say for example we have a central SharePoint list which will contain the actual navigation items, and the masterpage will simply look to that location to render the custom menu.

 

Pros:

  • Highly customizable
  • Spans site collections
  • One location to make changes
  • If list is well designed this approach would be easier to maintain than the previous example
 

Cons:

  • Requires custom compiled code
  • Still difficult to maintain
  • New sites are not added automatically
  • Security trimming / audience features are lost

Managed Navigation

Managed navigation is worth mentioning here, even without customization. While not exactly the beautiful MegaMenus that people have come to love, it is possible to create highly dense menus out of the box with Managed Navigation.

 

Pros:

  • OOTB functionality
  • Spans site collections
  • Relatively easy to manage if you have permission to do so

Cons:

  • No security trimming
  • Will not work with Foundation
  • New sites are not added automatically
  • Not visually appealing
  • Requires Managed Metadata, permissions assigned for management

 

Simple example 3-layer menu

Header1
  • Departments
    • Finance
    • HR
    • IT
    • Marketing
  • Groups
    • Group1
    • Group2
  • Teams
    • Team1
    • Team2
managed_nav.JPG

Managed Navigation, Enhanced with jQuery & CSS

In the previous example, we looked at how Managed Navigation can be used to provide several levels of fly-out menus, providing a great density of navigation links. However, it's not a visually pleasing presentation and the styling are not customizable out of the box.

With some clever client-side code (jQuery) and CSS, it would be possible to manipulate the HTML rendered in the browser to customize the appearance and make it more visually appealing. For example, instead of having a menu with flyouts inside of it, those flyouts could each be pulled into the original menu to render a real MegaMenu. This would actually be a great solution, except that Managed Navigation will not do security trimming. This is a big issue for most companies, but if it is not a problem for yours then this is a great approach.

 

Pros:

  • OOTB functionality (Enhanced)
  • Spans site collections
  • Relatively easy to manage if you have permission to do so

Cons:

  • No security trimming
  • Will not work with Foundation
  • New sites are not added automatically
  • Requires Managed Metadata, permissions assigned for management
 

Based on the previous Managed navigation example, we can transform the menu into something like this:

Header1
​Departments
  • Finance
  • HR
  • IT
  • Marketing
​Groups
  • Group1
  • Group2
​Teams
  • Team1
  • Team2

Structural Navigation, Enhanced with jQuery & CSS

Structural Navigation is the type of OOTB navigation which the vast majority of companies are utilizing. It is very simple to use and has many great features. Once enhanced with jQuery and CSS, this becoms one of the most comprehensive megamenu solutions for SharePoint. This is the foundation upon which our SharePoint MegaMenus are based.

As the Structural Navigation interface does not provide for a 3-level navigation hierarchy, we have implemented a simple syntax which defines the megamenu columns. This can be seen in the screenshots below.

Pros:

  • Easy to maintain
    • Very simple interface means little to no training is required
    • New sites can be added to the navigation automatically, and then only need to be positioned as desired
  • Security trimming is fully functional
  • OOTB functionality which has simply been enhanced with client-side code
  • We've already built it!

Cons:

  • Does not span site collections
                                                     
megamenu_display.jpg
megamenu_config.jpg