Mega Menu – Multi Column Container in Bootstrap 4 Nav Dropdown

Want to convert a Bootstrap 4 nav menu dropdown to a multi column container or mega menu? Or need a navbar that breaks navigation links into responsive Bootstrap 4 columns, even in WordPress. Check the attached image to know what I have meant.

The most popular Bootstrap 4 Beta Responsive Front-end framework just released 6 days before writing the article. By default in BS 4 navbar or nav, items are displayed as a single column list, one menu item below another. If we have 5 or 6 sub menu, it’s efficient. But what if we have 10 or more menus to show under a parent navigation. I hope nobody will like to display them as a single long list.

Mega Menu - Bootstrap 4 Nav Dropdown in Multi Column Container

So here in the article I want to break the dropdown list in 2, 3, 4 or 5 columns, each containing 4 to 6 menus max and all can be seen once you click the parent nav link. The idea is, put a container inside dropdown-menu & setup row/columns and re-arrange navigation links in those columns to make it a mega menu. All with just a little handy jQuery code.

Typical Twitter Bootstrap 4 Nav Menu structure:

Rather displaying all item in one column I wish to break them as a wider container with 2 columns, each containing 6 links. To do all this, first I added a class has-mega-menu to the list containing toggler and the dropdown. From here, our customization starts. So my code would look like:

If you’re using WordPress, you need to add has-mega-menu class to the parent, which shows the container mega menu on click. Check this article to know: How to add class to WordPress menu.

Read all Fellow Tuts articles related to Bootstrap 4 and 3.

Mega menu multi column container – jQuery

Now Copy the jQuery code below to your JS file (without script tag) or inline before closing body tag including script. For WordPress, put the same code in your theme specific JS file.

The code above convert Bootstrap 4 navs into a mega menu. Let’s understand what are we doing here. set is number of navigation links we wish to display per column. For example if I have 10-12 nav items, I would like to distribute them in 2 columns. So I will assign 5 or 6 to set variable in line #3. 

Doing so will give me value of cols to 2 using formula at line #7. Keep in mind that generally 4 columns is reasonable so adjust value of set according or 5 columns container is also available. Just have little space to hold each nav menu item in dropdown.

  • buffer: Array to hold html in each iteration.
  • children: Object holding all anchors in given dropdown
  • cols: Number of columns to produce withing container/row
  • col_class: Class assigned to each column. If it will have 3 columns, there will be col-md-4 class
  • container_class: We wish to restrict container width for our dropdown in Bootstrap 4 navbar. So I have specified 4 CSS rules for this purpose. It will increase size of container with number of columns calculated.
  • The first 4 rules are only for alpha versions of Bootstrap 4. For beta and upper versions, use last 4 media queries rules.

Mega Menu- Bootstrap 4 Nav Menu Dropdown in Multi Column List

Within for loop, first we are putting a column around, then picking matching children within dropdown using jQuery slice() function. And pushing their into buffer array variable. A set of 6 menu items will pick first 6 children then next upto 6. Each iteration of for loop adds a new column to container.

Lastly we joined the array, surrounded it with a container and row to convert Bootstrap 4 Nav Menu Dropdown in Multi Column Container List or somewhere Mega Menu.

You Might Interested In

10 COMMENTS

  1. roberto solini says:

    Hi Amit
    Thank you for this tutorial but I wonder if you consider extend it to add responsiveness ?
    Having a responsive mega menu with bootstrap 4 would be great

    Reply
    1. Amit Sonkhiya says:

      Hi @robertosolini:disqus
      BS4 is still in beta so it’s not safe to extend it as full flagged mega menu. Also there is nothing special in that, you just have to put container/container-fluid class within dropdown as I did & you can use it as regular container to organize menu content.

      If you’re using any CMS, you would need to extend nav class (ex. nav-walker in WordPress) else in PHP or any other framework, it should be simple.

      Reply
  2. Tuniverse says:

    Hi Amit. Thanks for posting this. Very helpful. How can I reduce the width of the columns (and the width of the entire mega menu as well)?

    Thanks! –John

    Reply
    1. Amit Sonkhiya says:

      Hi John,
      If you reduce width of container, the column width will automatically decrease. You can do it by specifying lesser width given at line #21, #27, #33, #39 in CSS rules

      Reply
    1. Amit Sonkhiya says:

      Hi @sonia sonia maklouf
      Thanks for update, I had created the original solution when Bootstrap 4 version alpha 6 was there and published article lately when beta released.

      I have updated the CSS code section for Bootstrap 4 Nav Menu for Beta version.

      Reply

Leave a Reply