Dropdowns

Dropdown (default)

<div class="mui-dropdown">
  <button class="mui-btn mui-btn--primary" data-mui-toggle="dropdown">
    Dropdown
    <span class="mui-caret"></span>
  </button>
  <ul class="mui-dropdown__menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</div>
View in new tab »

To right-align the menu, use the .mui-dropdown__menu--right class.

<div class="mui-dropdown">
  <button class="mui-btn mui-btn--primary" data-mui-toggle="dropdown">
    Dropdown (right aligned)
    <span class="mui-caret"></span>
  </button>
  <ul class="mui-dropdown__menu mui-dropdown__menu--right">
    <li><a href="#">A very long menu option</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</div>
View in new tab »

Dropup

To place the menu above the toggle button, use the .mui-dropdown--up class.

<div class="mui-dropdown mui-dropdown--up">
  <button class="mui-btn mui-btn--primary" data-mui-toggle="dropdown">
    Dropup
    <span class="mui-caret mui-caret--up"></span>
  </button>
  <ul class="mui-dropdown__menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</div>
View in new tab »

To right-align the menu, use the .mui-dropdown__menu--right class.

<div class="mui-dropdown mui-dropdown--up">
  <button class="mui-btn mui-btn--primary" data-mui-toggle="dropdown">
    Dropup (right aligned)
    <span class="mui-caret mui-caret--up"></span>
  </button>
  <ul class="mui-dropdown__menu mui-dropdown__menu--right">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</div>
View in new tab »

Dropright

To place the menu to the right of the toggle button, use the .mui-dropdown--right class.

<div class="mui-dropdown mui-dropdown--right">
  <button class="mui-btn mui-btn--primary" data-mui-toggle="dropdown">
    Dropright
    <span class="mui-caret mui-caret--right"></span>
  </button>
  <ul class="mui-dropdown__menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</div>
View in new tab »

To bottom-align the menu, use the .mui-dropdown__menu--bottom class.

<div class="mui-dropdown mui-dropdown--right">
  <button class="mui-btn mui-btn--primary" data-mui-toggle="dropdown">
    Dropright (bottom aligned)
    <span class="mui-caret mui-caret--right"></span>
  </button>
  <ul class="mui-dropdown__menu mui-dropdown__menu--bottom">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</div>
View in new tab »

Dropleft

To place the menu to the left of the toggle button, use the .mui-dropdown--left class.

<div class="mui-dropdown mui-dropdown--left">
  <button class="mui-btn mui-btn--primary" data-mui-toggle="dropdown">
    <span class="mui-caret mui-caret--left"></span>
    Dropleft
  </button>
  <ul class="mui-dropdown__menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</div>
View in new tab »

To bottom-align the menu, use the .mui-dropdown__menu--bottom class.

<div class="mui-dropdown mui-dropdown--left">
  <button class="mui-btn mui-btn--primary" data-mui-toggle="dropdown">
    <span class="mui-caret mui-caret--left"></span>
    Dropleft (bottom aligned)
  </button>
  <ul class="mui-dropdown__menu mui-dropdown__menu--bottom">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</div>
View in new tab »
« Previous Next »