Hello, Yamm 4!

This is Yet another megamenu for Bootstrap from Twitter.

Lightweight and pure CSS megamenu that uses the standard navbar markup and the fluid grid system classes from Bootstrap 4. Work for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements.

This project is currently hosted on Github and is the sequel to Yamm


View on GithubDownload

Markup

  1. Reuse navbar markup and add class .yamm at the top.

  2. Then add your markup into the .dropdown-menu

  3. Optionally use .yamm-content to wrap content with padding.

  4. .dropdown-item is ommited to avoid default background and text color styling

<nav class="yamm navbar navbar-expand-lg navbar-light bg-light">
...
     <ul class="navbar-nav">
       <li class="nav-item dropdown">
         <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown</a>
         <div class="dropdown-menu">
           <div class="yamm-content">
             ...
           </div>
         </div>
       </li>
     </ul>
...
</nav>

Grid Example

Fullwidth

By default every mega-dropdown will take the content size and is possible to add .yamm-fw to .dropdown to expand it fullwidth

Yamm works better with fullwidth menus.

<nav class="yamm navbar navbar-expand-lg navbar-light bg-light">
...
     <ul class="navbar-nav">
       <li class="nav-item dropdown yamm-fw">
         ...
       </li>
     </ul>
...
</nav>

More components

JavaScript

This code will prevent unexpected menu close when using some components (like accordion, forms, etc)

$(document).on('click', '.yamm .dropdown-menu', function(e) {
  e.stopPropagation()
})