How to set up Mega menu in SharePoint 2013 and Office 365 (v2013)

Avatar
Joao Ferreira
Follow

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

By default SharePoint displays the Global Navigation as Structural Navigation. Due a limitation of the product, it only displays menus with 2 levels.

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

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