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.

4 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.