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>