A Breakdown of the New Mega Menu Site Navigation in Modern SharePoint

Microsoft just released into Targeted Release tenants the ability to add a mega menu navigation at the site collection level.

*If you are looking for a true global navigation solution, you will need to create a custom SharePoint Framework (SPFx) Extension

Mega Menu Navigation

How to Configure

To change the navigation to the mega menu, click on the site actions menu (gear icon) in the upper right corner of the screen and select “Change the Look” from the dropdown menu.

Select “Navigation” from the menu.

Select “Mega Menu” from the options

Adding items to the Navigation

To add items to the navigation, select “Edit” from the header navigation.

Add items by clicking on the “+” in between the top navigation items. Select Header for top level items that will not be linked.

Make sure that the Header Item is a sub-link of the top navigation level item.

To add a link below your new header link, click on the “+” and add a link. Select “URL” from the dropdown menu.

The navigation will show from left to right once saved. Make sure that the item link is a sub link of the header item (now the third level down from the top nav item).

Press “save” to save the navigation. Your new mega menu navigation will show as a dropdown from the top-level navigation item.

Best Practices for Use

  • If you choose to use headers, make sure that the names provide logical groupings of the links such as by a topic or focus area for that site. Do not just name them “Featured Links”.
  • Provide governance over what links should go into the nav. Just because you can, doesn’t mean you should. Be careful not to let it become a dumping ground for all links
  • If you do not use headers, organize at a minimum by alphabetical order to help users find links sooner.
  • Not every top-level navigation item needs to have a mega menu. It’s ok for some links to not have a lot of additional related links.

6 Comments

  • comment-avatar
    Stephen May 23, 2019 (4:38 pm)

    Is this just for Communication sites, or does this apply to Team Sites as well?

    • comment-avatar
      D'arce Hess June 4, 2019 (6:15 pm)

      It is only available in Communication Sites at the moment.

  • comment-avatar
    Manohar June 11, 2019 (3:24 am)

    Hello

    After building a menu, is there a way to add a menu item programmatically based on certain conditions? If so, can you give me some guidance please?

    • comment-avatar
      D'arce Hess June 25, 2019 (7:50 pm)

      The only way to be able to add a menu programmatically would be by trying to add it using a site design/site script. It’s not something that can be done through the interface automatically.

  • comment-avatar
    Chris December 16, 2019 (2:55 am)

    Do you know if there is a way to ‘hold’ categories of menu items in one column of the mega menu? I’m having difficulty making it display well with oodles of white space and incredibly long menus where categories have been poorly placed. I’ve tried re-ordering to no avail. Thanks for any advice you may have.

    • comment-avatar
      D'arce Hess January 9, 2020 (2:22 pm)

      Hi Chris,

      There is no way to place a hold. I had this same issue. The only way I was able to re-order after the fact was basically by starting over and remaking the nav, which for a business need, is not great to restructure the nav for a look versus the actual purpose and finding of content for the user.