@fluidkit/lift

Long-press, right-click or press the menu key to lift any element above the page, with the background dimmed and blurred, and open your menu next to it. The iOS context menu, for the web. The same finger can slide onto an item to pick it. A copy of the element is lifted in a modal <dialog>, above any overflow, z-index or transform; the original stays in place.

Documentation · Changelog · Part of Fluid Kit

npm install @fluidkit/lift

<img class="photo" src="…" alt="…" tabindex="0" />

<div class="menu" role="menu" aria-label="Photo" hidden>
  <button role="menuitem">Copy</button>
  <button role="menuitem">Delete</button>
</div>

import { createLift } from "@fluidkit/lift";

createLift({
  element: document.querySelector(".photo"),
  menu: document.querySelector(".menu"),
  onSelect: (item) => console.log(item.textContent),
});

You write the menu; Lift positions it below (or above) the element, opens and closes it. See the documentation for options and the API.

React

@fluidkit/lift/react has components (each part can render as your own element with render) and a useLift() hook for custom markup.

import { Lift } from "@fluidkit/lift/react";

<Lift.Root onSelect={(value) => act(value)}>
  <Lift.Target render={<img src={src} alt="" />} />
  <Lift.Menu className="menu">
    <Lift.Item value="copy">Copy</Lift.Item>
    <Lift.Item value="share">Share</Lift.Item>
  </Lift.Menu>
</Lift.Root>

More in the documentation.

Vue

@fluidkit/lift/vue has the same components (each part can render as the element in its slot with as-child) and a useLift() composable. Vue 3.5+.

<script setup lang="ts">
import { Lift } from "@fluidkit/lift/vue";
</script>

<template>
  <Lift.Root @select="(value) => act(value)">
    <Lift.Target as-child><img :src="src" alt="" /></Lift.Target>
    <Lift.Menu class="menu">
      <Lift.Item value="copy">Copy</Lift.Item>
      <Lift.Item value="share">Share</Lift.Item>
    </Lift.Menu>
  </Lift.Root>
</template>

More in the documentation.

Svelte

@fluidkit/lift/svelte has the same components (each part can render an element of yours with a child snippet) and a useLift() function. Svelte 5.29+.

<script lang="ts">
  import { Lift } from "@fluidkit/lift/svelte";
</script>

<Lift.Root onSelect={(value) => act(value)}>
  <Lift.Target>
    {#snippet child({ props })}<img {...props} {src} alt="" />{/snippet}
  </Lift.Target>
  <Lift.Menu class="menu">
    <Lift.Item value="copy">Copy</Lift.Item>
    <Lift.Item value="share">Share</Lift.Item>
  </Lift.Menu>
</Lift.Root>

More in the documentation.

License

MIT © Mikhail Mogilnikov. See LICENSE.