Menu Columns

Bootstrap 5

Script

First, put this in the script.js below the isDesktop() function.

function isMobile(){
  return document.querySelector('.navbar-toggle').checkVisibility();
}

Inside of the DOMContentLoaded function (Scripts when the DOM is fully propagated), place this script:

// Adds flex row to dropdown menus when they have additional dropdowns inside them
  // ==================================================================================================================================
  document.querySelectorAll('.mainNav__collapse .banno-menu>li>.dropdown-menu').forEach((dropdown)=>{
    let internalDropdowns = dropdown.querySelectorAll('.dropdown-menu');
    if (internalDropdowns.length > 1  && (!isMobile())) {
      dropdown.classList.add('has-columns');
      if (internalDropdowns.length == 2) {
        dropdown.classList.add('has-columns-two');
      } else if (internalDropdowns.length == 3) {
        dropdown.classList.add('has-columns-three');
      } 
      // etc...
    } else {
      dropdown.classList.add('no-columns');
    }
  });

Then with the classes from those scripts you can restyle the menu with flexbox @extend as needed.

Bootstrap 3/4

Script

For organization, this should go in the large function with the other dropdown/menu-related stuff.

//set up menu columns
$('.navbar-collapse .banno-menu > li > ul').each(function() {
  if($(this).has('li.menu-group').length) {
    $(this).parents('li.dropdown').addClass('has-columns');
    if ($(this).children('li.menu-group').length == 2) {
      $(this).parents('li.dropdown').addClass('two-column');
    } else if ($(this).children('li.menu-group').length == 3) {
      $(this).parents('li.dropdown').addClass('three-column');
    }
  } else {
  $(this).parents('li.dropdown').addClass('no-columns');
  }
});

Styles - dropdown.scss

This can be pasted in its entirety into the bottom of the dropdown.scss file, and edited to match the style of whatever site you have.

// Styling/Setup for Columns
.navbar-collapse .banno-menu > li {
  .dropdown-menu {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
  }
  &.has-columns {
    .dropdown-menu {
      @extend .d-flex;
      @extend .flex-row;
      > li {
        padding: ; //add in your site's dropdown padding on either side of all columns
        &:first-child {
          padding-top: auto;
        }
        .dropdown-toggle {
          // whatever formatting for column title can go here
          &:after { // removes caret next to dropdown title
            display: none;
          }
        }
        .dropdown-menu {
          @extend .flex-column;
          position: relative;
          border-bottom: 0;
          left: 0;
          transform: translate(0,0);
          > li {
            padding: 0;
          }
        }
      }
    }
    &.two-columns .dropdown-menu > li {
      max-width: calc(100% / 2);            
    }
    &.three-column .dropdown-menu > li {
      max-width: calc(100% / 3);      
    }

    &.open {
      .dropdown-menu {
        pointer-events: all;
        opacity: 1;
        visibility: visible;
        z-index: $zindex-dropdown;
      }
    }
  }
}

Example Sites

• 1st United Services Credit Union
• Riverview Community Bank (2022 Remake)

Tags: bs3, bs4, flexbox, menu, script, js, jquery, javascript, scss, sass