Navbar Mega Menu

The Navbar component can work with mega menu, and provides some styling for that, however it doesn't provide or include any grid column styling, which is a totally different thing.

The important part to remember is that this functionality is heavily restrictive on markup structure, especially for HTML validity reasons, but let's dive right in.

<nav class="navbar">
  <a class="brand" href="#">Brand Text</a>
  <button class="subnav-toggle" aria-haspopup="true" aria-expanded="false">MENU</button>
  <div> <!-- menu & contents container -->
    <ul class="nav"> <!-- menu starts here -->
      <li> <!-- mega menu item LVL 0 -->
        <a href="#">Mega Menu Item
          <i aria-hidden="true" class="parent-icon"></i>
          <i class="menu-icon" aria-hidden="true"></i>
        </a>
        <div class="subnav"> <!-- notice the DIV tag here -->
          <ul class="row"> <!-- columns wrapper, notice the UL tag -->
            <li class="column"> <!-- mega sub-menu item is a column, menu item LVL 1 -->
              <span class="column-title">Mega Column Title LVL 1</span> <!-- column title must always be SPAN -->
              <button class="subnav-toggle" aria-label="Toogle Submenu" aria-haspopup="true" aria-expanded="false"> <!-- mega column title can also toggle sub-menu items -->
                <i class="menu-icon" aria-hidden="true"></i>
              </button>           
              <ul> <!-- IMPORTANT: notice this UL has no class -->
                <li> <!-- menu item LVL 2 -->
                  <a href="#">Mega Sub Menu Item
                    <i aria-hidden="true" class="parent-icon"></i>
                  </a>
                  <button class="subnav-toggle" aria-label="Toogle Submenu" aria-haspopup="true" aria-expanded="false">
                    <i class="menu-icon" aria-hidden="true"></i>
                  </button>
                  <ul class="subnav"> <!-- IMPORTANT: this UL has the "subnav" class -->
                    <li> <!-- menu item LVL 3 -->
                      <a href="#">Regular Sub-menu
                        <i aria-hidden="true" class="parent-icon"></i>
                      </a>
                      <button class="subnav-toggle" aria-label="Toogle Submenu" aria-haspopup="true" aria-expanded="false">
                        <i class="menu-icon" aria-hidden="true"></i>
                      </button>                      
                      <ul class="subnav">
                        <li><a href="#">Regular Sub-menu Item</a></li> <!-- menu item LVL 4 -->
                        <li><a href="#">Regular Sub-menu Item</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="column"> <!-- second column, menu item LVL 1 -->
              <!-- this column has no column title, the DIV below will be visible -->
              <div class="subnav-content">
                <!-- your markup content comes here -->
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</nav>

Mega Menu Breakdown:

The <div class="subnav"> element is your mega-menu wrapper and the reason for using the DIV tag is the need to apply the style rules differently from other non-mega-menu items, simple and effective.
The <ul class="row"> element wraps your columns. Note that your columns styling should use the same breakpoint as your navbar initialization.
The <li class="column"> element wraps your column content.
The immediate <span class="column-title"> child element is important, if not used, the next child content is visible on mobile view, but that is up to you to decide. The class="column-title" is styled by the component and helpful to better explain the structure.
The next <ul> or <div> child element of the above <li class="column"> must not use the subnav class;
The class="subnav-content" is similar to class="navbar-content", both are useful to adjust all contained anchor link colors to match the navbar or submenu background in both mobile and desktop views.