Having usable and accurate navigation is essential to the success of your SharePoint site. SharePoint’s default navigation can be used to create concise main navigation menus, and can even support taxonomy via Managed Navigation. Visually & functionally, however, you’re limited to a simple 4-level deep flyout/dropdown menu for the main navigation. In the side Quick Launch menus, hierarchy can be implied with simple indenting of the text links.
In both of those main navigation areas of SharePoint, the out-of-the-box experience does have some definite UI and UX constraints.
The Mega menus concept
Now, mega menus are probably well familiar to anyone and everyone by now- it was an up and coming design trend back in the late 2000’s. Old hat – but let’s review the fundamentals of this design pattern first:
Typically, a mega menu:
- is a single drop-down that appears on hover
- shows all the options in one large panel
- groups options into related categories
- uses icons or other graphics to help the user.
They can succeed because:
- They offer a good compromise between simple and expanding menus.
- They are easy to use and should suffer fewer accessibility problems.
- They can condense a lot of information architecture artifacts into a small amount of screen real estate
Now, in the SharePoint world, there arose a number of solutions to be able to implement mega menu-style navigation systems in response to the growing demand. Some examples:
Finally, here’s a gallery of some SharePoint sites using mega menus, which are either custom coded or leveraging commercial mega menus:
SharePoint sites using mega menus
The Archetonomy Solution
The Archetonomy Mega Menu system is a farm solution for on-premise SharePoint 2010, 2013 & 2016, and has the broadest feature set of any 3rd party solution that I know of in this vein for SharePoint. After positive experiences with the product, I figure it’s time to give it a review.
- Comprehensive What-You-See-Is-What-You-Get administration/design interface
- Styles can be applied ad-hoc, with inline or formalized CSS, or a combination of both
- Import/Export of menu configuration as an XML file eases transitioning to different environments
- Design workflow flexibility: Power users & less technical stakeholders can do initial mock-ups with the visual designer directly in the GUI, and then hand it over to a front-end developer to formalize CSS later
- While the drag and drop and visual design surface (which shows real-time X/Y coordinates of menu elements) increases efficiency and overall ease of use, it’s tedious to get everything to line up pixel-perfect when doing manual designs. What would really help is the ability to select multiple elements and align them left/right/top with one click, as can be done in programs like Visio, Photoshop etc.
- Archetonomy Megamenus are currently only for on-premise SharePoint. Office 365 SharePoint Online is not currently supported. I did hear that a SharePoint Online version might be in the works but have not seen an update about that.
- Links & content in the menu can be displayed dynamically, either individually or in sections, based on:
- Content search queries, for example:
- query selects the top 10 most downloaded documents from the HR department
- selects results based on what logged In user is currently viewing the page (e.g. the last 10 documents I personally accessed)
- Managed Metadata tagged content: the hierarchy of words that reflects organizational structure, business units & concepts can be reflected in the menu
- Managed Navigation (TermStore): The specialized portion of Managed Metadata that is focused on site navigation, can be used. This gives special advantages like being able to use “friendly” URL’s.
- SharePoint list managed navigation (with folder grouping): Standard SharePoint Lists can be used as the place where links are added. This gives the special advantage that the admin can assign certain user permissions to edit that list, allowing isolation of edit rights for the overall menu:
- For example, the admin could add a section of links in the Marketing Department section of the main menu, which draws its data from a SharePoint list in the Marketing Departments site collection. A user in Marketing with basic training on how to work with SharePoint Lists, could be delegated access to be able to add/edit/remove links from that SharePoint List. This user would not be able to edit anything else in the main menu system other than the links generated by their specific SP List.
- Three-level hierarchy (List Panels): It’s possible to maximize “screen real estate” and offer a richer selection of content, by adding an interactive Panel bar section. When a user clicks on a horizontal link section, the related content area displays in the same dropdown. In this way we can multiply the amount of content that can be displayed in single, fixed size menu dropdown area:
- Publishing Pages: When this section is added to menu, it will automatically display all pages in the current Sites Publishing Pages Library, which is the standard place where SharePoint Publishing Pages are created. This makes it simple to render the most typical type of SharePoint CMS content.
- Audiences, which are predefined groups that users can be added into, for example a typical use case could be “New Hires”, whereby any user in that group is shown menu content & links focused on onboarding topics.
- Content search queries, for example:
- Search input boxes can be added anywhere inside the dropdown menu, with the search boxes optionally sending users to specialized search results pages. For example, a search input box inside a HR Department menu dropdown, could send the user to a search results page focused only on HR-related content
Design & Ease of Use
- Standardized CSS can be used, for example as part of a Branding Solution. In this way, when one adds a new links or content, it can already by default inherit the overall corporate branding styles.
- Content and site designers can design and create menus directly in the browser without needing to write HTML or CSS
- Although designing and building menus with Mega Drop Down for SharePoint is not difficult, building highly functional menus requires several skillsets. While the same person can represent many of these skillsets, identifying these roles upfront will further increase your menu’s adoption rate:
- Information Architect – Responsible for understanding what content exists within your site and defining what options are available for accessing content.
- UI Designer – Responsible for designing an intuitive and effective interface.
- UI Developer – Responsible for implementing the design. This person is typically responsible for building the HTML and CSS.
- Menu Administrator – Responsible for managing the links and updating navigation content.
- Menu Sub-Administrators– Users in the organization who are granted selective access to add or edit only certain portions of the menu, such as a user in the Marketing Department given access to edit just links & content in that section of the menu
Although it’s a shame there’s not a SharePoint Online version of this, it’s still a powerful menu system for those with on-premise SharePoint. The ability to visually design the menu layouts and content is a big win, especially for rapid prototyping – although one needs to consider carefully how much the design should be controlled by manual activities vs how much should be put on rails by creating formal CSS rules.
Being able to add complex controls like Search Inputs, or deliver link content based on Content Search queries can help create truly useful navigation systems. With mega menu powers, comes mega responsibilities: putting everything including the kitchen sink into a menu navigation system also can create it’s own user experience issues, so one has to to be mindful that underlying usability is paid attention to.