Menu

<script setup lang="ts">
const items = [
  [
    { label: "Edit", value: "edit" },
    { label: "Rename", value: "rename" },
  ],
  [
    { label: "Delete", value: "delete" },
  ],
];
</script>

<template>
  <Menu :items="items">
    <template #trigger="{ toggle }">
      <button @click="() => toggle()">More ▾</button>
    </template>
  </Menu>
</template>

<script setup lang="ts">
const items = [
  { type: "checkbox", label: "Show sidebar", checked: true, value: "sidebar",
    onUpdateChecked: (v) => console.log("sidebar:", v) },
  { type: "checkbox", label: "Compact mode", checked: false, value: "compact",
    onUpdateChecked: (v) => console.log("compact:", v) },
];
</script>

<script setup lang="ts">
import { ref } from "vue";
const radioValues = ref({ view: "list" });

const items = [
  { type: "radio", label: "Grid", value: "grid", radioGroup: "view" },
  { type: "radio", label: "List", value: "list", radioGroup: "view" },
];
</script>

<template>
  <Menu :items="items" v-model:radio-values="radioValues">
    <template #trigger="{ toggle }">
      <button @click="() => toggle()">View ▾</button>
    </template>
  </Menu>
</template>

<script setup lang="ts">
const items = [
  { label: "Share", children: [
    { label: "Copy link", value: "copy-link" },
    { label: "Send email", value: "send-email" },
  ]},
];
</script>