Multi-column navigation menus in SharePoint

Here’s a quick tip to provide a pseudo-mega-menu in SharePoint.

This CSS revision should work with the standard SharePoint 2010 and 2013 horizontal navigation menu that uses either Managed Navigation or Structured navigation.

Let’s look at a normal presentation of the Global navigation menu.  You can see if I have more than 10-12 items, I have to scroll the browser to see the full menu.

sp-menu-single-column

By simply using CSS to render the menu using multiple columns, we can now see the whole menu above the fold of the page.

sp-menu-multi-column

Here’s the CSS to apply.  You’ll need to put this in to an alternate CSS file or otherwise reference it through your custom master page.

/*two column nav dropdown - only in wide view*/
@media (min-width: 768px) {
  #topnavbar .nav li.static > ul.dynamic {
    text-align: left !important;
    width: 550px !important;
  }

  #topnavbar .nav li.static > ul.dynamic > li.dynamic {
    display: inline-block;
    list-style-type: none;
    float: left !important;
    width: 49% !important;
  }

  #topnavbar .nav li.static > ul.dynamic > li.dynamic:nth-child(odd) {
    clear: left !important;
  }
}

A few additional comments:

  • In this specific case, I am using Bootstrap, so that is why the .nav class indicator is included in the selector.  It is also why I wrap this CSS block in a media query so that the multiple column display only is applied in the largest views of the page.
  • You’ll notice that it renders the menu items left to right, not down the first column, then up to the second column.  This is simply an easier approach since we never know how many menu elements are present.

There are other Mega Menu approaches that incorporate images or multiple menu hierarchies.  However, if you just needing to compress the menu above the fold, this is a pretty efficient method.

About the author

derek

Derek Smith is a software developer with 20 years of history developing on the Microsoft platform. He is the founder of HomeSpot HQ, and is the Director for Microsoft SharePoint Professional Services at rmsource, inc. in Raleigh, NC.

Derek is on Twitter, , and Linked In

2 comments for “Multi-column navigation menus in SharePoint

  1. Jim
    October 18, 2014 at 2:43 pm

    Any suggestions on how to do this for a multi-level managed metadata hierarchy? Trying to create a 3 column flyout with 1st level metadata as the top navigation, 2nd level metadata as column headers, and 3rd level metadata items as the links.

    Thanks,
    Jim Bury

    • Aj
      April 13, 2015 at 2:34 pm

      Hello Derek,
      Can we make it in 3 columns? because I do have around 50 sub menu items to display.

      Thanks
      Aj

Leave a Reply