Dropdown

The dropdown component is a container for a dropdown button and a dropdown menu.

• dropdown-trigger is the container for a button.
• dropdown-overlay the togglable container for a menu, hidden by default, with a white background and a shadow.

• Menu item
• Menu item
• Menu item

<div class="qtm-dropdown qtm-visible">
  <div class="qtm-dropdown-trigger">
    <button class="qtm-button qtm-filled qtm-primary">Dropdown button</button>
  </div>
  <div class="qtm-dropdown-overlay">
    <ul class="qtm-menu-item-list">
      <li class="qtm-menu-item">
        <span class="qtm-menu-item-label">Menu item</span>
      </li>
      <li class="qtm-menu-item">
        <span class="qtm-menu-item-label">Menu item</span>
      </li>
      <li class="qtm-menu-item">
        <span class="qtm-menu-item-label">Menu item</span>
      </li>
    </ul>
  </div>
</div>

Dropdown overlay

You are able to implement inside a div with qtm-dropdown-overlay class, a menu item list, a paragraph or whatever.

You can insert any type of content within the dropdown overlay.

<div class="qtm-dropdown qtm-visible">
  ...
  <div class="qtm-dropdown-overlay">
    <p className="qtm-body-2 p-m">
      You can insert any type of content within the dropdown overlay.
    </p>
  </div>
</div>

Visible

You can add qtm-visible class to display dropdown-overlay.

• Menu item

<div class="qtm-dropdown qtm-visible">...</div>

Placement

You can add the qtm-right, qtm-left, qtm-center, qtm-top and qtm-bottom class to place the dropdown overlay. By default the placement is qtm-bottom qtm-left.

The dropdown is bottom left aligned.

<div class="qtm-dropdown qtm-left">...</div>

The dropdown is center aligned.

<div class="qtm-dropdown qtm-center">...</div>

The dropdown is bottom right aligned.

<div class="qtm-dropdown qtm-right">...</div>

The dropdown is top left aligned.

<div class="qtm-dropdown qtm-top qtm-left">...</div>

The dropdown is top center aligned.

<div class="qtm-dropdown qtm-top qtm-center">...</div>

The dropdown is top right aligned.

<div class="qtm-dropdown qtm-top qtm-right">...</div>