Skip to main content

Dropdown

Dropdown is used to create expand area upon click or hover. The first value is used as a title for the dropdown - in this case text "Options". You can also use this element in NavBar.

Syntax​

let elements = [
  {
    type: "dropdown",
    text: "Options",
    items: ["Earth", "Sea", "Fire"]
  }
];

Rendered Element​

behaviour Argument​

The behaviour property controls how the dropdown menu is triggered by the user.

Accepted values:

ValueDescription
clickDefault. The dropdown opens when the user clicks on the dropdown element.
mouseoverThe dropdown opens when the user hovers the mouse over the dropdown element.
new Dropdown()
  .set({
    behaviour: "mouseover", // click otherwise
    padding: "10px",
    border: "1px solid black",
  })
  .add([
    new Text("Options"),
    new Text("Earth"),
    new Text("Sea"),
    new Text("Fire"),
  ]);