Dropdown

The dropdown component is a container for a dropdown-trigger and a dropdown-overlay.

• 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

<qtm-dropdown>
  <qtm-dropdown-trigger>
    <qtm-button>Dropdown button</qtm-button>
  </qtm-dropdown-trigger>
  <qtm-dropdown-overlay>
    <qtm-menu-item-list>
      <qtm-menu-item>
        <qtm-menu-item-label> Menu Item 1 </qtm-menu-item-label>
      </qtm-menu-item>
      <qtm-menu-item>
        <qtm-menu-item-label> Menu Item 2 </qtm-menu-item-label>
      </qtm-menu-item>
      <qtm-menu-item>
        <qtm-menu-item-label> Menu Item 3 </qtm-menu-item-label>
      </qtm-menu-item>
    </qtm-menu-item-list>
  </qtm-dropdown-overlay>
</qtm-dropdown>

Dropdown overlay

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

Dropdown button

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

<qtm-dropdown visible>
  <qtm-dropdown-trigger>
    <qtm-button>Dropdown button</qtm-button>
  </qtm-dropdown-trigger>
  <qtm-dropdown-overlay>
    <qtm-typography component="body-2" classes="p-m"
      >You can insert any type of content within the dropdown
      overlay.</qtm-typography
    >
  </qtm-dropdown-overlay>
</qtm-dropdown>

Visible

You can use visible attribute to display dropdown-overlay.

Dropdown buttonMenu Item

<qtm-dropdown visible> ... </qtm-dropdown>

Placement

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

Left aligned

The dropdown is bottom left aligned.

<qtm-dropdown visible placement="bottom-left"> ... </qtm-dropdown>

Center aligned

The dropdown is center left aligned.

<qtm-dropdown visible placement="bottom-center"> ... </qtm-dropdown>

Right aligned

The dropdown is bottom right aligned.

<qtm-dropdown visible placement="bottom-right"> ... </qtm-dropdown>

Top left aligned

The dropdown is top left aligned.

<qtm-dropdown visible placement="top-left"> ... </qtm-dropdown>

Top center aligned

The dropdown is top center aligned.

<qtm-dropdown visible placement="top-center"> ... </qtm-dropdown>

Top right aligned

The dropdown is top right aligned.

<qtm-dropdown visible placement="top-right"> ... </qtm-dropdown>

Customize style

Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

API

qtm-dropdown

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabled	boolean	false	If true, the component is disabled.
placement	"bottom-center" | "bottom-left" | "bottom-right" | "top-center" | "top-left" | "top-right"		Placement of dropdown overlay
visible	boolean	false	If true, the dropdown overlay is opened

Event	Type	Description
click-outside	CustomEvent<void>	Callback fired when the dropdown overlay is closed.
visible-change	CustomEvent<DropdownVisibleData>	Callback fired when the dropdown trigger is clicked. function(event: object) => void

qtm-dropdown-trigger

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabled	boolean	false	If true, the dropdown trigger is disabled does not emit a trigger event.

Event	Type	Description
trigger-event	CustomEvent<void>	Callback fired when the dropdown trigger is clicked.

qtm-dropdown-overlay

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing