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 setup>
  import { ref } from "vue";

  const menu2 = ref(null);
</script>

<template>
  <Button type="primary" :onclick="ev => menu2 = ev">Click me</Button>

  <Portal v-if="menu2">
    <Menu :options="options" :parent="menu2" :onclick="clicked" at="right"></Menu>
  </Portal>
</template>

Related article: Relative positioning

Related sample: Menu basic