How To Create a Megamenu in SharePoint Online

Topics: SharePoint Tips, SharePoint Online

Written by Alex K Joseph

In recent years, Microsoft SharePoint has significantly improved, offering a more user-friendly UI. Today's SharePoint pages are easier to use and edit in comparison to classic SharePoint pages. While many users enjoy the classic SharePoint experience, the need for the SharePoint modern UI cannot be dismissed. In this blog, we will show you how to create a megamenu in SharePoint Online and how to optimize its configuration.

What is a megamenu?

When compared to the standard menu view in SharePoint, megamenus offer an enhanced presentation of submenus and pages. Cascade view offers a tried and tested old view, which is rather ineffective when compared to the megamenu option.

The biggest highlight of SharePoint megamenus is how they provide a complete summary of the site navigation in one view. As a result, users can easily discover content, improving the user's experience on the site.

Dock 365 Free E-book Download - SharePoint Content Management

Most effective uses for megamenus

SharePoint megamenu is most effective for navigation that demands to showcase three levels of hierarchy. This doesn't look quite as visually appealing in the cascade view. Moreover, it is megamenus make it much easier and faster to find desired content.

Megamenu is now available in Communication sites and Hub sites. You cannot use a megamenu in SharePoint team sites.

How to create a megamenu in SharePoint Online

Complete the following steps to create a megamenu for your SharePoint communication site:

  • Go to the site that currently uses a cascade menu that you would like to transition to a megamenu. We are using our Dock Marketing News communication site in this demonstration.
    Standard menu - cascade.
  • Click the Edit option provided next to the menu.
  • From the editing panel that opens on the left side, hover your mouse over each option to display the icon.
    click on plus icon to add link.
  • Click on it to add a link or label as required.
  • We are going to add a label, Webinars, below the Pages option first.
    Add link or label.
  • Click on the ellipses next to Webinars and choose Make sub link.
    make sublink.
  • Hover your mouse below the newly added sub-link to add more pages below it.
    Add links under webinars.
  • After adding new pages below, click on the ellipses and choose Make sub link again to add more sub links. This is how a 3-level hierarchy is formed.
    Add links under webinars-1.
    CMS highlights - make sublink.
  • We are adding one more label here. (Discussions)
    Adding one more lable as subsection.
  • If the newly added label is listed as a sub link, click on ellipses, and choose Promote sub link.
  • After adding sub links as required, click Save.
    Click save to publish changes.
  • This is how it looks in the cascade view now:
    cascade menu view.
  • To enable the megamenu, click the Settings icon at the top and choose Change the look.
    settings - change looks.
  • Choose Navigation and select Mega menu.
    Click on navigation.
  • Click Save.
    mega menu - click save.
  • You can view the mega menu now.
    Mega menu final look.
  • Add more options (as this is how you create a mega link) to complete your megamenu design.
Try creating mega navigation menus for your SharePoint communication sites and hub sites, and let us know about your experience below.

Book a Live demo

Schedule a live demo of Dock 365's Contract Management Software now.

Don't Get Left Behind!
Subscribe to Dock 365 Blogs!
Stay up to date with the latest business tips and trends.