shift ​

shift nudges the floating element back into view after placement has been chosen.

• Type

  ts

  function shift(options?: ShiftOptions): Middleware;
  
  interface ShiftOptions {
    mainAxis?: boolean;
    crossAxis?: boolean;
    limiter?: {
      fn: (state: MiddlewareState) => Coords;
      options?: unknown;
    };
    padding?: Padding;
    boundary?: Boundary;
    rootBoundary?: RootBoundary;
    elementContext?: ElementContext;
    altBoundary?: boolean;
  }

• Details

  shift is the right choice when you want to preserve the chosen placement and only adjust the coordinates enough to keep the floating element visible. It can shift on the main axis, the cross axis, or both.

  Use it together with flip() when you want a stable preferred placement plus a fallback if that placement cannot fit.

• Example

<script setup lang="ts">
import { ref } from "vue";
import { useFloatingContext, usePosition } from "v-float";

const anchorEl = ref<HTMLElement | null>(null);
const floatingEl = ref<HTMLElement | null>(null);
const open = ref(true);

const context = useFloatingContext({ refs: { anchorEl, floatingEl }, state: { open } });
const { styles } = usePosition(context, {
  middleware: {
    shift: { padding: 8, crossAxis: true },
  },
});
</script>

<template>
  <button ref="anchorEl">Anchor</button>

  <div v-if="context.state.open.value" ref="floatingEl" :style="styles">Floating content</div>
</template>

• See also
  • flip - Chooses another placement when the preferred one overflows
  • offset - Adds spacing before shifting
  • size - Adjusts the floating element to the available space