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 property accepts one of the following string values:

  • "bottom" - positions the menu below the target node with the left edges aligned.

  • "right" - positions the menu to the right of the target node

  • "left" - positions the menu to the left of the target node

  • "bottom-left" - positions the menu below the target node with the right edges aligned

  • "bottom-fit" - positions the menu below the target node and sets its width equal to the width of the target node

  • "point" - positions the menu at the explicit left / top coordinates and ignores the parent node

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>
      )}
    </>
  );
}

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: Relative positioning

Related sample: Menu basic