Skip to main content

at

Description​

specifies the position of DropDown Menu relative to the target node

Type​

string

Default​

"bottom"

Values​

"bottom" | "right" | "left" | "bottom-left" | "bottom-fit" | "point"

Example​

<DropDownMenu {options} at="bottom-fit" on:click={clicked}>
    <Button type="primary">Click me (fit )</Button>
</DropDownMenu>

Details​

The detailed description of possible values of the at property is given below:

  • "bottom" - a menu appears below the target node, left borders aligned (the menu goes to the right of the action area)
  • "right" - a menu appears right to the target node
  • "left" - a menu appears left to the target node
  • "bottom-left" - a menu appears below the target node, right borders aligned (the menu goes to the left of the action area)
  • "bottom-fit" - a menu appears below the target node, the width of the menu is equal to the width of the target node
  • "point" - a menu appears at the specified left/top position and ignores the provided node

Related article: Setting the position of DropDown Menu

Related sample: Drop-down menu