How can I add a dropdown menu to the Sharepoint Foundation top navigation bar?

SP2010 Foundation SP2013 Foundation

Info: SharePoint Designer is required in order to accomplish the steps described in this article. If you need to download it please follow this link

By default SharePoint Foundation doesn’t support dropdown menus on the top navigation bar. However, our themes can be modified to support this feature.

To have this feature in your SharePoint Foundation, you will have to do the following:

  1. In SharePoint, go to Site Actions > Site Settings > Top Link Bar
    • Create your top Navigation
    • To create a sub-menu of the last menu item, start the name of the sub menu with dash, dash, space (-- )

      toplink.png

  2. Open your site with SharePoint Designer
  3. Import the attached file to All Files > Site Assets
    • SharePoint 2013: spf-dropdown2013.js
    • SharePoint 2010: spf-dropdown2010.js

    import_file.png

  4. Go to All Files > _catalogs and edit the file THEMENAME.master
  5. Look for the following line of code:
    <script type="text/javascript" src="/_layouts/1033/JS/THEMENAME/BindMENU.js"></script>
  6. Right above it paste the following line
    • SharePoint 2013:
      <script type="text/javascript" src="/SiteAssets/spf-dropdown2013.js"></script>
    • SharePoint 2010:
      <script type="text/javascript" src="/SiteAssets/spf-dropdown2010.js"></script>
  7. Save the changes.
  8. Check in the file, and publish the major version of the master page.
  9. Refresh the page

    menu.png

Have more questions? Submit a request

Comments

  • Avatar
    Daniel Pettersson

    Hey,

    I cant find the file themeName.master or any other file which contains the code <script type="text/javascript" src="/_layouts/1033/JS/_themePackage_/BindMENU.js"></script> under _catalogs

  • Avatar
    Robb Cabansag

    I know this thread is a bit old, but I thought I would add this.

    Your implementation givers no visual indication that the menu item contains a sub menu. Since your theme utilizes FontAwesome, I added this line to the spf-dropdown2013.js file.

    "$parent.find("span.menu-item-text").append('<i class="fa fa-chevron-down" style="padding-left:4px"></i>');"

    It adds the down chevron to the text of the link (important for hover to work). Hope you find it useful.

    Edited by Robb Cabansag

Got a question?

If you can't find the answer to your question, you can contact us.
We are here and happy to help.

Powered by Zendesk