Type Alias DropdownOpenPosition

DropdownOpenPosition:
    | "pointer"
    | "element-right-upward"
    | "element-right-centered"
    | "element-right-downward"
    | "element-left-upward"
    | "element-left-centered"
    | "element-left-downward"
    | "element-bottom-leftward"
    | "element-bottom-centered"
    | "element-bottom-rightward"
    | "element-top-leftward"
    | "element-top-centered"
    | "element-top-rightward"

This is used to specify where the dropdown menu should be opened.

Note that in all cases, the position of the menu will be clamped to fit in the page, assuming the entire menu can fit in the page.

  • pointer: The top-left corner of the menu will be where the pointer is. Opening the menu rightward and downard If the pointer is close enough to the the right side of the page such that the menu wouldn't fit, the menu will be opened to the left of the pointer instead.
  • element-right-upward: The bottom-left corner of the menu will be where the bottom-right corner of the element is, growing upward.
  • element-right-centered: The left side of the menu will be where the right side of the triggering element is, keeping the same vertical center as the triggering element.
  • element-right-downward: The top-left corner of the menu will be where the top-right corner of the element is, growing downward.
  • element-left-upward: The bottom-right corner of the menu will be where the bottom-left corner of the element is, growing upward.
  • element-left-centered: The right side of the menu will be where the left side of the triggering element is, keeping the same vertical center as the triggering element.
  • element-left-downward: The top-right corner of the menu will be where the top-left corner of the element is, growing downward.
  • element-bottom-leftward: The top-right corner of the menu will be where the bottom-right corner of the element is, growing leftward.
  • element-bottom-centered: The top side of the menu will be where the bottom side of the triggering element is, keeping the same horizontal center as the triggering element.
  • element-bottom-rightward: The top-left corner of the menu will be where the bottom-left corner of the element is, growing rightward.
  • element-top-leftward: The bottom-right corner of the menu will be where the top-right corner of the element is, growing leftward.
  • element-top-centered: The bottom side of the menu will be where the right side of the triggering element is, keeping the same horizontal center as the triggering element.
  • element-top-rightward: The bottom-left corner of the menu will be where the top-left corner of the element is, growing rightward.