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​

<script>
  let menu2 = null;
</script>

<Button type="primary" onclick={ev => menu2 = ev}>Click me</Button>

{#if menu2}
  <Portal>
    <Menu {options} parent={menu2} onclick={clicked} at={"right"}></Menu>
  </Portal>
{/if}

Related article: Relative positioning

Related sample: Menu basic