Dropdown

The Dropdown component is a container for a DropdownTrigger and a DropdownOverlay.

• DropdownTrigger is the container for a button.
• DropdownOverlay is the togglable container for a menu, hidden by default, with a white background and a shadow.

Menu Item

Menu Item

Menu Item

<Dropdown>
  <DropdownTrigger>
    <Button>Dropdown button</Button>
  </DropdownTrigger>
  <DropdownOverlay>
    <MenuItemList>
      <MenuItem id="menu-item-1">
        <MenuItemLabel>Menu Item</MenuItemLabel>
      </MenuItem>
      <MenuItem id="menu-item-2">
        <MenuItemLabel>Menu Item</MenuItemLabel>
      </MenuItem>
      <MenuItem id="menu-item-3">
        <MenuItemLabel>Menu Item</MenuItemLabel>
      </MenuItem>
    </MenuItemList>
  </DropdownOverlay>
</Dropdown>

Dropdown overlay

You are able to implement inside a DropdownOverlay a menu item list, a paragraph or whatever.

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

<Dropdown visible>
  <DropdownTrigger>
    <Button>Dropdown button</Button>
  </DropdownTrigger>
  <DropdownOverlay>
    <Typography component="body-2" classes="p-m"
      >You can insert any type of content within the dropdown
      overlay.</Typography
    >
  </DropdownOverlay>
</Dropdown>

Visible

You can use visible attribute to display DropdownOverlay.

Menu Item

<Dropdown visible> ... </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.

The dropdown is bottom left aligned.

<Dropdown visible placement="bottom-left"> ... </Dropdown>

The dropdown is center left aligned.

<Dropdown visible placement="bottom-center"> ... </Dropdown>

The dropdown is bottom right aligned.

<Dropdown visible placement="bottom-right"> ... </Dropdown>

The dropdown is top left aligned.

<Dropdown visible placement="top-left"> ... </Dropdown>

The dropdown is top center aligned.

<Dropdown visible placement="top-center"> ... </Dropdown>

Event handling

The Dropdown component provides two event handlers:

• onVisibleChange: Triggered when the dropdown visibility changes (when the trigger is clicked)
• onClickOutside: Triggered when a user clicks outside the dropdown (useful for closing the dropdown)

const handleVisibleChange = (visible) => {
  console.log(`Dropdown visibility changed to: ${visible}`);
  // Your logic here
};

const handleClickOutside = () => {
  console.log('Clicked outside the dropdown');
  // Your logic here
};

<Dropdown 
  onVisibleChange={handleVisibleChange}
  onClickOutside={handleClickOutside}
>
  <DropdownTrigger>
    <Button>Dropdown button</Button>
  </DropdownTrigger>
  <DropdownOverlay>
    <MenuItemList>
      <MenuItem>
        <MenuItemLabel>Menu Item</MenuItemLabel>
      </MenuItem>
    </MenuItemList>
  </DropdownOverlay>
</Dropdown>

API

QtmDropdown

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
onClickOutside	CustomEvent<void>	Callback fired when the dropdown overlay is closed.
onVisibleChange	CustomEvent<DropdownVisibleData>	Callback fired when the dropdown trigger is clicked. function(event: object) => void

QtmDropdownTrigger

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
onTriggerEvent	CustomEvent<void>	Callback fired when the dropdown trigger is clicked.

QtmDropdownOverlay

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