Navigation plays a key role in the design of any website, and SharePoint should be no different. It should provide users with a simple and obvious method of locating content that is relevant to the the site, regardless of where the content resides. In SharePoint, designing and maintaining an intuitive navigation structure can present a problem to site owners and administrators. In this post I’ll walk through the steps to setup a global navigation menu that is security trimmed, provides up to two levels of flyout and can link to internal or external resources.
Of the available navigation methods, most organizations I work with use Structural Navigation to manage their global navigation links. This method provides security trimming, which means the links will only be visible to users with access to the item. While not always critical for an intranet, most departmental or project sites require permission-driven navigation like this. Another reason organizations opt for Structural Navigation is because it automatically adds subsites and pages to the navigation upon creation. While this reduces some administrative effort, it does not take into account context or user experience. For example, a company’s most popular resources may reside on a page within the HR site. Using the automatically added navigation links, this page would display below the link to the HR site. If we were designing navigation with end users in mind, links to popular resources should be made available higher up in the navigational hierarchy. Automatically adding links to the navigation may be quick, but it is not always effective.
With this in mind, how do we configure SharePoint navigation to be simple, effective, security trimmed and interactive without modifying the masterpage or using code? Let’s walk through what I’ve found to be an easy way to achieve this.
Activate Publishing Infrastructure Site Collection Features
In order to start using Structural Navigation, you must activate the Publishing Features. When logged in as a Site Collection Administrator, access the Site Settings, and view the Site Collection Features. Find the SharePoint Server Publishing Infrastructure Features and click on the Activate button.
Prior to activating these features, your global navigation options will be limited to either adding a new navigation link or changing the order of the navigation links.
Once activated, you will see many new site features including a variety of navigation options.
Add Links to Global Navigation From Site Settings
There are two types of navigation menu items you can select from when setting up Structural Navigation; Headings and Links. Headings are meant to be the parent, and Links fall below the Headings. There are two buttons on the navigation settings page that allow you to add either a new Heading or a new Link.
Once the links are created, your navigation links would look something like this:
When organizing links here, you’ll realize that Headings cannot be moved under other Headings. Only Links can be moved beneath a Heading. Therefore you would only be able to achieve one level of vertical flyout in your SharePoint site using these features alone.
Perhaps one vertical dropdown meets your site requirements. In that case, great! You’re done! However if you want to add a second horizontal flyout, keep reading.
In order to create another level of flyout, you will need to combine the navigation site settings with the new Edit Links settings available in SharePoint 2013 and Online. In older versions of SharePoint we would modify the masterpage to increase the MaximumDynamicDisplayLevel from 1 to 2. Due to the rapid release cycle of changes to SharePoint Online, modifying the masterpage should be avoided unless absolutely necessary. My approach involves adding all three levels of links to the Global Navigation Settings and using the Edit Links feature to organize the links into the proper navigational hierarchy. Let me explain…
Instead of trying to sort and order the links from the Navigation Settings page, just use that spot to create the links. Another key for this to work is to pay close attention to the type of menu item you use for each link in the navigation. These are the rules:
- Top level links must be created as Headings
- First level flyout links (vertical) must be created as Headings
- Second level flyout links (horizontal) must be created as Links
The resulting navigation links will all displayed on the settings page, but not in the proper hierarchy.
Once those Headings and Links are added, you can save your changes and move onto the final step.
Organize Links in Global Navigation Using ‘Edit Links’
If we stopped here, the navigation links would all be visible from the homepage, but they would not be dynamic with flyouts.
However, with a little dragging and dropping we are able to restructure our global navigation with two levels of flyouts.
The process for rearranging the links is easy. Click on the Edit Links option to the right of the global navigation. Once the links are able to edited, simply drag your links to the appropriate location in your navigational hierarchy. If you’ve created the right types of navigation menu items in the previous step (Heading or Link), then this step should be a breeze. However, if you run into issues moving one link underneath another, it’s likely because you are trying to move a Heading under a Link.
You would move the first level of flyout navigation menu items (Headings) underneath the top level links (also Headings).
Finally, you would drag the second level of flyout navigation menu items (Links) under the first level (Headings).
That’s my no-code solution for implementing vertical and horizontal flyouts in SharePoint 2013 and SharePoint Online.