Dropdowns

Left-aligned (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 »

Right-aligned

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

<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 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 »
« Previous Next »