Skip to main content

at

Description​

Optional. Specifies the position of Context Menu relative to the target node

Usage​

at?: string;

Default value​

"bottom"

Parameters​

The at property accepts one of the following string values:

Basic positions​

  • "bottom" - positions the menu below the target node
  • "top" - positions the menu above the target node
  • "left" - positions the menu to the left of the target node
  • "right" - positions the menu to the right of the target node
  • "center" - positions the menu centered relative to the target node
  • "point" - positions the menu at explicit coordinates, ignoring the target node

Corner positions​

  • "bottom-left" - positions the menu below the target node, right edges aligned
  • "bottom-right" - positions the menu below the target node, left edges aligned
  • "top-left" - positions the menu above the target node, right edges aligned
  • "top-right" - positions the menu above the target node, left edges aligned

Start / Center / End aligned variants​

These follow directional alignment relative to the target node.

Bottom aligned​
  • "bottom-start" - below the target, aligned to its start edge
  • "bottom-center" - below the target, centered horizontally
  • "bottom-end" - below the target, aligned to its end edge
Top aligned​
  • "top-start" - above the target, aligned to its start edge
  • "top-center" - above the target, centered horizontally
  • "top-end" - above the target, aligned to its end edge
Left aligned​
  • "left-start" - to the left of the target, aligned to its top edge
  • "left-center" - to the left of the target, centered vertically
  • "left-end" - to the left of the target, aligned to its bottom edge
Right aligned​
  • "right-start" - to the right of the target, aligned to its top edge
  • "right-center" - to the right of the target, centered vertically
  • "right-end" - to the right of the target, aligned to its bottom edge

Fit variants​

These adjust positioning to keep the menu inside the viewport:

  • "bottom-fit" - below the target node, width matches the target node
  • "top-fit" - above the target node, width matches the target node
  • "center-fit" - centered relative to the target node while fitting the viewport

Example​

<ContextMenu options={options} at="right" />

Related article: Setting the position of Context Menu

Related sample: Context for items