Dropdowns (Grid)

Use native Bootstrap grid content in a dropdown menu.

About the Plugin

We extended the Bootstrap dropdowns plugin to provide dropdowns with the flexibility of Bootstrap's grid. Using familiar markup and data attributes, you can nest any type of content in a dropdown, including other dropdowns!

This allows for multi-level dropdown menus and so-called "Mega Menus".

Dropdowns may be triggered on click or hover, and automatically position themselves to fit in the window.

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

  1. Load the plugin code in index.js

    Declare the following import statement in js/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.

    import mrDropdownGrid from './dropdown-grid';
  2. Export the necessary object from theme.js

    Edit the export object in js/mrare/index.js to include the following:

    export {
 mrDropdownGrid,
};

Basic Usage

Grid Dropdowns follow the same structure as a Bootstrap dropdown with the following differences:

  • Use data-toggle="dropdown-grid" instead of data-toggle="dropdown".
  • Immediate child of div.dropdown-menu may be div.container or div.row
  • Immediate child of div.dropdown-menu must have attribute data-dropdown-content

In this example, the dropdown is full-width, so div.dropdown-menu contains a div.container > div.row > div.col structure.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown-grid" type="button" aria-expanded="false" aria-haspopup="true">
    <span>Dropdown</span>
    <!-- Arrow icon SVG in dropdown toggle -->
    <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.4444 8.41358C14.7776 8.2281 15.1875 8.46907 15.1875 8.85048V15.1495C15.1875 15.5309 14.7776 15.7719 14.4444 15.5864L8.78505 12.4369C8.44258 12.2463 8.44258 11.7537 8.78505 11.5631L14.4444 8.41358Z" fill="#212529"></path></svg>
  </button>
  <div class="dropdown-menu bg-primary-3 text-light border-bottom">
    <div class="container py-5" data-dropdown-content>
      <div class="row">
        <div class="col">
          <div class="p-3 m-1 rounded bg-primary">.col</div>
        </div>
        <div class="col">
          <div class="p-3 m-1 rounded bg-primary">.col</div>
        </div>
        <div class="col">
          <div class="p-3 m-1 rounded bg-primary">.col</div>
        </div>
        <div class="col">
          <div class="p-3 m-1 rounded bg-primary">.col</div>
        </div>
      </div>
    </div>
  </div>
</div>

Options

In addition to triggering on click, Grid Dropdowns may also be triggered on hover. See below table for how to enable hover option.

Data attribute Default Usage
data-dropdown-grid-hover false Apply data-dropdown-grid-hover="true" on the page <body> to enable hover for all Grid Dropdowns on the page
data-hover false Apply data-hover to individual [data-toggle="dropdown-grid"] elements with true or false to override the page default.

Nested Dropdowns

Grid Dropdowns may be nested inside Grid Dropdowns to create multi-level dropdown menus.

In this case, the class row is added to div.dropdown-menu and its immediate child is div.col-auto. This is necessary to display the dropdown menus at their natural width.

<!-- Level 1 -->
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown-grid" type="button" aria-expanded="false" aria-haspopup="true">
    <span>Dropdown</span>
    <!-- Arrow icon SVG in dropdown toggle -->
    <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.4444 8.41358C14.7776 8.2281 15.1875 8.46907 15.1875 8.85048V15.1495C15.1875 15.5309 14.7776 15.7719 14.4444 15.5864L8.78505 12.4369C8.44258 12.2463 8.44258 11.7537 8.78505 11.5631L14.4444 8.41358Z" fill="#212529"></path></svg>
  </button>
  <div class="dropdown-menu row">
    <div class="col-auto" data-dropdown-content>
      <div class="card card-sm card-body shadow">
        <h6>Level 1 Heading</h6>
        <a href="#" class="dropdown-item">Link</a>
        <!-- Level 2 -->
        <div class="dropdown">
          <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
            <span>Next Level</span>
            <!-- Arrow icon SVG in dropdown toggle -->
            <svg class="icon bg-dark opacity-20" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.4444 8.41358C14.7776 8.2281 15.1875 8.46907 15.1875 8.85048V15.1495C15.1875 15.5309 14.7776 15.7719 14.4444 15.5864L8.78505 12.4369C8.44258 12.2463 8.44258 11.7537 8.78505 11.5631L14.4444 8.41358Z" fill="#212529"></path></svg>
          </a>
          <div class="dropdown-menu row">
            <div class="col-auto" data-dropdown-content>
              <div class="card card-sm card-body shadow">
                <a href="#" class="dropdown-item">Level 2 Link</a>                        
              </div>
            </div>
          </div>
        </div>
        <!-- End level 2 -->
      </div>
    </div>
  </div>
</div>
<!-- End Level 1 -->

Rich Content Dropdowns

Any content may be nested inside Grid Dropdowns allowing maximum flexibility and mobile responsiveness.

In this case, the class row is added to div.dropdown-menu and its immediate child is div.col-auto. This is necessary to display the dropdown menus at their natural width.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown-grid" type="button" aria-expanded="false" aria-haspopup="true">
    <span>Dropdown</span>
    <!-- Arrow icon SVG in dropdown toggle -->
    <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.4444 8.41358C14.7776 8.2281 15.1875 8.46907 15.1875 8.85048V15.1495C15.1875 15.5309 14.7776 15.7719 14.4444 15.5864L8.78505 12.4369C8.44258 12.2463 8.44258 11.7537 8.78505 11.5631L14.4444 8.41358Z" fill="#212529"></path></svg>
  </button>
  <div class="dropdown-menu row">
    <div class="col-xl-6 col-lg-7 col-md-8" data-dropdown-content>
      <div class="card card-body shadow p-0">
        <h6 class="mb-0 dropdown-content">Product Features</h6>
        <hr class="m-0">
        <div class="row no-gutters">
          <div class="col-md">
            <a href="#" class="d-flex m-3">
              <!-- Timer icon SVG -->
              <svg class="icon icon-lg bg-primary-2" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Icon For Timer</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect opacity="0" x="0" y="0" width="24" height="24"></rect><path d="M12,21 C7.581722,21 4,17.418278 4,13 C4,8.581722 7.581722,5 12,5 C16.418278,5 20,8.581722 20,13 C20,17.418278 16.418278,21 12,21 Z" fill="#000000" opacity="0.3"></path><path d="M13,5.06189375 C12.6724058,5.02104333 12.3386603,5 12,5 C11.6613397,5 11.3275942,5.02104333 11,5.06189375 L11,4 L10,4 C9.44771525,4 9,3.55228475 9,3 C9,2.44771525 9.44771525,2 10,2 L14,2 C14.5522847,2 15,2.44771525 15,3 C15,3.55228475 14.5522847,4 14,4 L13,4 L13,5.06189375 Z" fill="#000000"></path><path d="M16.7099142,6.53272645 L17.5355339,5.70710678 C17.9260582,5.31658249 18.5592232,5.31658249 18.9497475,5.70710678 C19.3402718,6.09763107 19.3402718,6.73079605 18.9497475,7.12132034 L18.1671361,7.90393167 C17.7407802,7.38854954 17.251061,6.92750259 16.7099142,6.53272645 Z" fill="#000000"></path><path d="M11.9630156,7.5 L12.0369844,7.5 C12.2982526,7.5 12.5154733,7.70115317 12.5355117,7.96165175 L12.9585886,13.4616518 C12.9797677,13.7369807 12.7737386,13.9773481 12.4984096,13.9985272 C12.4856504,13.9995087 12.4728582,14 12.4600614,14 L11.5399386,14 C11.2637963,14 11.0399386,13.7761424 11.0399386,13.5 C11.0399386,13.4872031 11.0404299,13.4744109 11.0414114,13.4616518 L11.4644883,7.96165175 C11.4845267,7.70115317 11.7017474,7.5 11.9630156,7.5 Z" fill="#000000"></path></g></svg>
              <div class="ml-2">
                <span class="h6 mb-0">Time Tracking</span>
                <div class="text-small text-muted">Keep on top of things</div>
              </div>
            </a>
            <a href="#" class="d-flex m-3">
              <!-- Layout icon SVG -->
              <svg class="icon icon-lg bg-primary-2" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    <title>Icon For Layout-top-panel-2</title>    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>        <path d="M3,4 L20,4 C20.5522847,4 21,4.44771525 21,5 L21,7 C21,7.55228475 20.5522847,8 20,8 L3,8 C2.44771525,8 2,7.55228475 2,7 L2,5 C2,4.44771525 2.44771525,4 3,4 Z M10,10 L20,10 C20.5522847,10 21,10.4477153 21,11 L21,19 C21,19.5522847 20.5522847,20 20,20 L10,20 C9.44771525,20 9,19.5522847 9,19 L9,11 C9,10.4477153 9.44771525,10 10,10 Z" fill="#000000"></path>        <rect fill="#000000" opacity="0.3" x="2" y="10" width="5" height="10" rx="1"></rect>    </g></svg>
              <div class="ml-2">
                <span class="h6 mb-0">Multiple Layouts</span>
                <div class="text-small text-muted">Customise interface layout</div>
              </div>
            </a>
          </div>
          <div class="col-md">
            <a href="#" class="d-flex m-3">
              <!-- Page icon SVG -->
              <svg class="icon icon-lg bg-primary-2" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    <title>Icon For File</title>    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">        <polygon points="0 0 24 0 24 24 0 24" opacity="0"></polygon>        <path d="M5.85714286,2 L13.7364114,2 C14.0910962,2 14.4343066,2.12568431 14.7051108,2.35473959 L19.4686994,6.3839416 C19.8056532,6.66894833 20,7.08787823 20,7.52920201 L20,20.0833333 C20,21.8738751 19.9795521,22 18.1428571,22 L5.85714286,22 C4.02044787,22 4,21.8738751 4,20.0833333 L4,3.91666667 C4,2.12612489 4.02044787,2 5.85714286,2 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>        <rect fill="#000000" x="6" y="11" width="9" height="2" rx="1"></rect>        <rect fill="#000000" x="6" y="15" width="5" height="2" rx="1"></rect>    </g></svg>
              <div class="ml-2">
                <span class="h6 mb-0">Wiki</span>
                <div class="text-small text-muted">Document your product</div>
              </div>
            </a>
            <a href="#" class="d-flex m-3">
              <!-- Box icon SVG -->
              <svg class="icon icon-lg bg-primary-2" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    <title>Icon For Box#2</title>    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>        <path d="M4,9.67471899 L10.880262,13.6470401 C10.9543486,13.689814 11.0320333,13.7207107 11.1111111,13.740321 L11.1111111,21.4444444 L4.49070127,17.526473 C4.18655139,17.3464765 4,17.0193034 4,16.6658832 L4,9.67471899 Z M20,9.56911707 L20,16.6658832 C20,17.0193034 19.8134486,17.3464765 19.5092987,17.526473 L12.8888889,21.4444444 L12.8888889,13.6728275 C12.9050191,13.6647696 12.9210067,13.6561758 12.9368301,13.6470401 L20,9.56911707 Z" fill="#000000"></path>        <path d="M4.21611835,7.74669402 C4.30015839,7.64056877 4.40623188,7.55087574 4.5299008,7.48500698 L11.5299008,3.75665466 C11.8237589,3.60013944 12.1762411,3.60013944 12.4700992,3.75665466 L19.4700992,7.48500698 C19.5654307,7.53578262 19.6503066,7.60071528 19.7226939,7.67641889 L12.0479413,12.1074394 C11.9974761,12.1365754 11.9509488,12.1699127 11.9085461,12.2067543 C11.8661433,12.1699127 11.819616,12.1365754 11.7691509,12.1074394 L4.21611835,7.74669402 Z" fill="#000000" opacity="0.3"></path>    </g></svg>
              <div class="ml-2">
                <span class="h6 mb-0">API Reference</span>
                <div class="text-small text-muted">Enhance your product</div>
              </div>
            </a>
          </div>
        </div>
        <hr class="m-0">
        <div class="px-3 py-2 d-flex justify-content-between align-items-center">
          <span class="text-small">Get a demo from our friendly team</span>
          <a href="#" class="btn btn-sm btn-outline-primary-2">Get a demo</a>
        </div>
      </div>
    </div>
  </div>
</div>