How to set up Mega menu in SharePoint

In some scenarios, you may want your users to be able to quickly and more effectively check any navigation item you're displaying. This same task is made even more complex with the default Cascading menu provided by the out-of-the-box SharePoint experience. 

BindTuning themes provide the flexibility to change that same experience, utilizing the built-in Mega menu capability.  This same feature is accommodated in both Modern and Classic SharePoint experiences.

Classic SharePoint

Our themes include a Mega menu, which is not included in the default Classic SharePoint sites and it needs at least 3 menu levels to work as a mega menu.

To get a menu with at least 3 levels you need to use the Managed Navigation. To configure your term set, please proceed as follows.

Note: The settings site just show 2 levels, in this sites the mega menu will not work.
  1. In your SharePoint site:
    • Go to Settings > Site Settings;
    • Under Look and Feel select Navigation;
  2. Select the Managed Navigation for the Global Navigation;

    1.PNG

  3. Scroll down and click Create Term Set;

    2.PNG

  4. Once created, open the Term Store Management Tool to edit the term set;

    3.PNG

  5. Expand your term set and create new terms;

    4.png

  6. Build your menu structure with at least 3 levels;
  7. Save the menu;
  8. To accomplish the following steps you need the SharePoint designer:
    Open your site with SharePoint designer;
    • Farm solution: All files > _catalogs > master page
    • Sandbox solution: All files > _catalogs > master page > THEMENAME
  9. Check out and edit the master page you are using;
  10. Locate
    $('#MenuH').BindMENU(options);
  11. Change the option from Style:"default" to Style:"MegaMenu";
  12. Save the master, check it in and if asked publish the major version.

    5.png

Modern SharePoint

The same Mega menu experience can be accomplished when on Modern SharePoint sites. 

Unlike Classic SharePoint, we're able to configure three levels of navigation, hence covering all the dependencies for a Mega menu, utilizing both Managed Metadata, as well as the default (Global) navigation.

Global Navigation

When utilizing Modern SharePoint's Global navigation (default), we're given the ability to create a navigation structure that utilizes three navigation levels, making the usage of a Mega menu a possibility. 

To do this: 

  1. Configure your Global navigation utilizing Modern SharePoint's default interface; 
  2. Click on the button BindTuning Settings
  3. Click on Navigation
  4. Under Sub-menu styles, choose the Megamenu option.

    megamenu-global-nav.png

After selecting the Mega menu option, your default navigation will display that same sub-menu style. 

modern-megamenu.PNG

Managed Navigation

By default, Modern Site Collections do not allow for the usage of Term Set navigation. However, BindTuning themes provide this same functionality. 

To set up your Mega menu, follow the steps below: 

  1. Open your site collection; 
  2. Click on the button BindTuning Settings
  3. Click on Navigation
  4. On the Menu provider dropdown, select Term Set

    1.png

  5. Navigate to your Term Store Management Tool, and find your corresponding term set.
  6. On your General tab, copy the Unique Identifier

    2.png

  7. Paste the ID under Term Set ID
  8. Under Look and Feel, change the menu style to Megamenu

    3.png

After following the above-mentioned steps, your navigation will display the Mega menu as expected. 

4.PNG

Have more questions? Submit a request

Comments

  • Avatar
    RWhite

    Thanks mate, but I don't have Navigation menu under the look and feel! please advice

  • Avatar
    Garreth van Leeve

    Hi

    I have gone from steps 1 to 11 but cannot find the <div id="MenuH" ...> tag anywhere?

    Will this work for SP Server 2013 on premise or only Office 365?

    What did I miss?

    Thanks

    Garreth

  • Avatar
    Bosak, Brian

    The code they are referring to is in the masterpage that came with the Design Template from bindtuning, not in the default masterpage.

  • Avatar
    Getulio

    Why should I be locating on my MasterPage? For example I'm not sure what I'm supposed to do here " </Template_Controls>
    /SharePoint:DelegateControl
    <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
    <SharePoint:AspMenu
    ID="TopNavigationMenu"
    Runat="server"
    EnableViewState="false"
    DataSourceID="topSiteMap"
    AccessKey="<%$Resources:wss,navigation_accesskey%>"
    UseSimpleRendering="true"
    UseSeparateCss="false"
    Orientation="Horizontal"
    StaticDisplayLevels="2"
    AdjustForShowStartingNode="true"
    MaximumDynamicDisplayLevels="2"
    SkipLinkText="" />
    /asp:ContentPlaceHolder
    /SharePoint:AjaxDelta
    </div>"

  • Avatar
    Bosak, Brian

    After building the menu structure in the "Term store management tool" you may discover none of the sub menu items appear, and no flyouts appear at all.
    Verify that the Publishing site feature is Activated from YourSiteURL/_layouts/15/ManageFeatures.aspx

    Try Deactivating and Re Activate the Theme Package and the menu structure should work.
    Make sure you created at least 3 levels of Managed Metadata in your Term Store Management.

  • Avatar
    Mbollhoefer

    Do any of these menus work in SharePoint 2010? The demo clearly shows these menus in the content.

  • Avatar
    Priyanka Rakhecha
    Hi. How can we highlight the first menu item? For me by default the last top menu item is defaulted. Please advice. Thanks,
  • Avatar
    Catheryn Mancarti

    Hi, can you let me know how to display 4 layers deep?

Powered by Zendesk