SharePoint Insights: Mega Menus & Intranets

When navigating websites in your daily lives you probably frequently interact with mega menus. I intend on covering what megamenus are and how they are built and function within your intranet site. Mega menus have been a trend in web design for years, usually for sites with many products, links, or sub sites to navigate. When a mega menu is done well they can improve usability of the site. More recently we have seen a trend in minimizing top navigation as mega menus often can provide too many links to wade through, even when designed well. This downward trend has been less apparent for intranet portals. Companies are still seeing benefits when using mega menus for their employee intranet sites, or simple organizational politics or requirements dictate a large number of links in the navigation bar, and only a mega menu will suffice. The key to designing a mega menu is understanding the user behaviors as well as the user goals when operating on the site.

 A mega menu with many subsites
A mega menu with many subsites

The benefits for your company are twofold: When users (employees) are navigating your site better, they are reaching their end goals quicker, meaning they are more likely to engage and produce results for your company sales, collaboration, knowledge acquisition, etc. It also leaves more room on your site for your content or other information that needs to be displayed.
The basic structure of a mega menu is a menu that hovers out with multiple columns, with each column presenting a different grouping of sites and links. Grouping needs to be done in relatable sets. Each group needs to have descriptive labeling, that triggers the users to know that the column contains the set of links they are looking for. Finally, a company can utilize hierarchical order, putting the links or groups that will most likely need to be used towards the top left, where the users’ eye and mouse is going to be navigating from.
Mega Menu Basic Structure
Example of the basic structure of a mega menu

Our most recent mega menu project was done for a global banking company. We had to choose between a few different methods, SharePoint driven structured navigation, SharePoint driven managed navigation, or author driven list based navigation. We used structured navigation which is based on the hierarchy of the site- the pages, subpages, and so forth. Then using JavaScript we had SharePoint reinterpret the data so that the mega menus could be organized into the appropriate columns.
A snippet of our code used to build mega menus
A snippet of our code used to brand mega menus

From a development standpoint this is quite a convoluted approach. SharePoint doesn’t easily do mega menus so we really needed a fool-proof strategy, especially for our clients that want all the links for their intranet a click away for their users. The other value of structured navigation is that when a new page or subpage is added all of the mega menus or updated immediately. This is especially important when SharePoint is the main collaboration tool. As users update and add pages they want their team members to be able to access those pages instantly. Generally speaking this is not true for list driven mega menus, which need to re-update for the mega menu to link properly. Structured navigation also allows us to use security trimmings. In SharePoint certain sites and pages may be restricted to users based on security settings. With security trimmings, site and page links will show up in the mega menu based on the identity of the user and their security level. This creates a more clean experience for all users by omitting pages that are not needed.
[bctt tweet=” Companies are still seeing benefits when using mega menus for their employee intranet sites”]
There is one strong advantage to using list driven mega menus. List driven mega menus may be shared across multiple site collections, so my developers assure me. If your SharePoint site is separated across site collections using a list, you can insert your site structure and then use JavaScript that can access the list no matter what site collection you are on. This way you will be able to access the list to have your mega menu in your intranet.
Although we are seeing mega menus phasing out of the public facing site realm, we are still seeing demand for them in company portals. Whereas customers and public facing site users will not convert on your site because of confusing or too large of mega menus, often your employees see this differently. For their intranet portal they want all their links and sub sites easily accessible. They become familiar with the ones needed most and a mega menu is the most efficient way for them to get to the information as quickly as possible. Even though mega menus can be challenging to design and develop, PixelMill enjoys the process and agrees with the benefits they can bring to your company or organization’s intranet site.
 

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under

Related

Do you need to build a custom search-driven component for your #digitalworkspace while saving thousands of hours of development time?

Join us on as we lift the hood of #PnP Modern Search v4, show you how it's built, & take you on a live coding adventure.

http://ow.ly/MTnL50EpN5J

#Hybridwork is more than just a buzzword to latch onto; it’s the future for many organizations for the unforeseeable future. So, how can you use #Microsoft365 for #hybridwork? Let's breaks it down…

http://ow.ly/ay2e50EmNhg

It's that time again! Join the #PixelMillWebinars on 4/29 where @EricOverfield lifts the hood of #PnP Modern Search v4, shows how it's built, & takes you on a live coding adventure to customizing your own web part using the power of the existing codebase.

http://ow.ly/EI5h50EmNqj

What? Anchor links now work in #SharePoint site navigation! This fix snuck in and I completely missed it. Use them to create a TOC for long pages or cross link between pages. They work in text or quick links web parts & nav too! https://support.microsoft.com/en-us/office/create-and-use-modern-pages-on-a-sharepoint-site-b3d46deb-27a6-4b1e-87b8-df851e503dec#bkmk_pageanchors

A big thank you to David Leveille and @CrushNetworks for having our President + Co-Founder @EricOverfield on this episode of #TheVirtualWaterCooler!

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch