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.

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.