Universal Material

Menus

Down

<span class="u-dropdown">
  <button class="u-text-btn u-dropdown-toggle">Menu</button>
  <div class="u-dropdown-menu down">
    <div class="u-dropdown-content">
      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
    </div>
  </div>
</span>

Down left

<span class="u-dropdown">
  <button class="u-text-btn u-dropdown-toggle">Menu</button>
  <div class="u-dropdown-menu down-left">
    <div class="u-dropdown-content">
      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
    </div>
  </div>
</span>

Down right

<span class="u-dropdown">
  <button class="u-text-btn u-dropdown-toggle">Menu</button>
  <div class="u-dropdown-menu down-right">
    <div class="u-dropdown-content">
      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
    </div>
  </div>
</span>

Down start

<span class="u-dropdown">
  <button class="u-text-btn u-dropdown-toggle">Menu</button>
  <div class="u-dropdown-menu down-start">
    <div class="u-dropdown-content">
      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
    </div>
  </div>
</span>

Down end

<span class="u-dropdown">
  <button class="u-text-btn u-dropdown-toggle">Menu</button>
  <div class="u-dropdown-menu down-end">
    <div class="u-dropdown-content">
      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
    </div>
  </div>
</span>

Up

<span class="u-dropdown">
  <button class="u-text-btn u-dropdown-toggle">Menu</button>
  <div class="u-dropdown-menu up">
    <div class="u-dropdown-content">
      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
    </div>
  </div>
</span>

Up left

<span class="u-dropdown">
  <button class="u-text-btn u-dropdown-toggle">Menu</button>
  <div class="u-dropdown-menu up-left">
    <div class="u-dropdown-content">
      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
    </div>
  </div>
</span>

Up right

<span class="u-dropdown">
  <button class="u-text-btn u-dropdown-toggle">Menu</button>
  <div class="u-dropdown-menu up-right">
    <div class="u-dropdown-content">
      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
    </div>
  </div>
</span>

Up start

<span class="u-dropdown">
  <button class="u-text-btn u-dropdown-toggle">Menu</button>
  <div class="u-dropdown-menu up-start">
    <div class="u-dropdown-content">
      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
    </div>
  </div>
</span>

Up end

<span class="u-dropdown">
  <button class="u-text-btn u-dropdown-toggle">Menu</button>
  <div class="u-dropdown-menu up-end">
    <div class="u-dropdown-content">
      <a href="#" class="u-dropdown-item text-nowrap">Item A</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item B</a>
      <a href="#" class="u-dropdown-item text-nowrap">Item C</a>
    </div>
  </div>
</span>