Skip to main content
🏠ComponentsDropdownVersion: Next

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.
Dropdown buttonMenu ItemMenu ItemMenu Item
<div class="qtm-dropdown">
  <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>

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

Dropdown button

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.

Dropdown buttonMenu 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.

Left aligned

The dropdown is bottom left aligned.

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

The dropdown is center left aligned.

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

The dropdown is bottom right aligned.

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

The dropdown is top left aligned

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

The dropdown is top center aligned

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

The dropdown is top right aligned

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