The menu a right-click opens, on whatever it was opened over.
Import it from rei-kit/web:
import { BaseContextMenu } from 'rei-kit/web'
Open BaseContextMenu in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { useToast } from 'rei-kit'
import { BaseContextMenu } from 'rei-kit/web'
const toast = useToast()
</script>
<template>
<BaseContextMenu label="Row actions">
<template #default="{ props }">
<!-- A button, because `aria-expanded` belongs to a role that takes
it. A div with `tabindex` is reachable, not announced. -->
<button
type="button"
class="border-hair rounded-card focus-ring w-full border border-dashed p-6 text-sm"
v-bind="props"
>
Right-click this area — or focus it and press Shift+F10.
</button>
</template>
<template #items="{ close }">
<button type="button" role="menuitem" @click="(toast.success('Renamed'), close())">
Rename
</button>
<button type="button" role="menuitem" @click="(toast.info('Duplicated'), close())">
Duplicate
</button>
<hr />
<button type="button" role="menuitem" @click="(toast.danger('Deleted'), close())">
Delete
</button>
</template>
</BaseContextMenu>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
label | string | yes | Names the menu for a screen reader. Already translated. |
disabled | boolean | false | Leaves the browser's own menu alone — for a text field, or a link. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.