Context Menu — Vue

---
import ContextMenu from '../components/astro/ContextMenu.astro';
---

<ContextMenu triggerLabel="Right-click" client:load>
  <div class="context-menu__item">Edit</div>
  <div class="context-menu__separator" role="separator" />
  <div class="context-menu__item">Delete</div>
</ContextMenu>

<!-- Rizzo CSS + context-menu script. data-context-menu-trigger on trigger. -->
<div data-context-menu-trigger>Right-click</div>
<div class="context-menu" role="menu">...</div>

<script>
  import { ContextMenu } from '$lib/rizzo';
</script>

<ContextMenu triggerLabel="Right-click">
  <div class="context-menu__item">Edit</div>
  <div class="context-menu__separator" role="separator" />
  <div class="context-menu__item">Delete</div>
</ContextMenu>

<script setup>
import ContextMenu from '@/components/rizzo/ContextMenu.vue';
</script>

<template>
  <ContextMenu>
    <span>Right-click</span>
    <div class="context-menu__item">Edit</div>
    <div class="context-menu__separator" role="separator" />
    <div class="context-menu__item">Delete</div>
  </ContextMenu>
</template>

import { ContextMenu } from './components/react';

<ContextMenu trigger={<span>Right-click</span>}>
  <div className="context-menu__item">Edit</div>
  <div className="context-menu__separator" role="separator" />
  <div className="context-menu__item">Delete</div>
</ContextMenu>