Skip to main content

at

Description​

Optional. Specifies the position of the 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​

import { useState } from "react";

function Example() {
  const [menu2, setMenu2] = useState<HTMLElement | null>(null);

  return (
    <>
      <Button type="primary" onClick={(ev) => setMenu2(ev.currentTarget as HTMLElement)}>
        Click me
      </Button>

      {menu2 && (
        <Portal>
          <Menu options={options} parent={menu2} onClick={clicked} at="right" />
        </Portal>
      )}
    </>
  );
}

Related article: Relative positioning

Related sample: Menu basic