A dropdown action menu: a trigger opens a floating list of actions, links, checkbox/radio items, grouped sections, and nested submenus. It follows the WAI-ARIA menu pattern (role="menu" with menuitem / menuitemcheckbox / menuitemradio / separator, roving focus, and aria-haspopup="menu" on submenu triggers) — distinct from a value-selecting ListBox / Select.

Under the hood it reuses the ListBox in its pattern="menu" mode for every list surface (root and each submenu) and the Popover positioning layer, adding only the trigger, submenu orchestration, and Apple-style safe-triangle pointer tracking (a submenu stays open while the cursor arcs diagonally toward its panel).

Default

Click the trigger (or ↓ / Enter / Space) to open. Arrow keys move the roving cursor, → opens a submenu, ← / Esc close it, Enter activates. Hover a submenu trigger to open it — moving diagonally toward the open panel won’t close it (safe triangle).

AstroReactSvelteVue

PreviewCode

---
import Menu from "../menu.astro";
import Stamp from "@pindoba/astro-stamp";
import {
  FilePlus,
  FolderOpen,
  Share2,
  Link,
  Mail,
  Users,
  BookOpen,
  Trash2,
} from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
import type { MenuNode } from "@pindoba/core-menu";

// NOTE (Astro): trailing <Kbd> shortcuts that the Svelte/React/Vue demos
// render as real components are represented here via the `shortcut` string
// prop instead — Astro's item data is JSON-serialized for hydration, so
// components can't ride along in `items`. Leading icons ARE forwarded, the
// same way rich-items.astro does it: named slots on <Menu> keyed
// `<id>:leading`, which Menu resolves per level (including nested submenus)
// via `optionSlotsHtml`. Checkbox/radio items already render a built-in
// check indicator, so they're left without a leading icon here. Checked/
// selected state is conveyed via aria-checked (server-rendered) and
// reflected in the status line below via events.
const items: MenuNode[] = [
  { type: "action", id: "new", label: "New file", shortcut: "⌘N" },
  { type: "action", id: "open", label: "Open…", shortcut: "⌘O" },
  { type: "separator", id: "s1" },
  {
    type: "group",
    id: "view",
    label: "View",
    items: [
      { type: "checkbox", id: "wrap", label: "Word wrap", checked: true },
      { type: "checkbox", id: "minimap", label: "Minimap", checked: false },
    ],
  },
  { type: "separator", id: "s2" },
  {
    type: "radiogroup",
    id: "sort",
    label: "Sort by",
    value: "name",
    items: [
      { type: "radio", id: "sort-name", label: "Name", value: "name" },
      { type: "radio", id: "sort-date", label: "Date modified", value: "date" },
      { type: "radio", id: "sort-size", label: "Size", value: "size" },
    ],
  },
  { type: "separator", id: "s3" },
  {
    type: "submenu",
    id: "share",
    label: "Share",
    items: [
      { type: "action", id: "copy", label: "Copy link" },
      { type: "action", id: "email", label: "Email" },
      {
        type: "submenu",
        id: "social",
        label: "Social",
        items: [
          { type: "action", id: "x", label: "X / Twitter" },
          { type: "action", id: "ln", label: "LinkedIn" },
        ],
      },
    ],
  },
  { type: "separator", id: "s4" },
  {
    type: "link",
    id: "docs",
    label: "Documentation",
    href: "https://pindoba.js.org",
    target: "_blank",
  },
  { type: "action", id: "del", label: "Delete", feedback: "danger" },
];
---

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Menu id="astro-menu-default" items={items} aria-label="File actions">
    Actions

    <Stamp slot="new:leading" size="sm" emphasis="ghost"><FilePlus /></Stamp>
    <Stamp slot="open:leading" size="sm" emphasis="ghost"><FolderOpen /></Stamp>
    <Stamp slot="share:leading" size="sm" emphasis="ghost"><Share2 /></Stamp>
    <Stamp slot="copy:leading" size="sm" emphasis="ghost"><Link /></Stamp>
    <Stamp slot="email:leading" size="sm" emphasis="ghost"><Mail /></Stamp>
    <Stamp slot="social:leading" size="sm" emphasis="ghost"><Users /></Stamp>
    <Stamp slot="docs:leading" size="sm" emphasis="ghost"><BookOpen /></Stamp>
    <Stamp slot="del:leading" size="sm" emphasis="ghost"><Trash2 /></Stamp>
  </Menu>
  <p id="astro-menu-default-status">
    Word wrap: on · Minimap: off · Sort: name · Last action: —
  </p>
</div>

<script>
  const LABELS: Record<string, string> = {
    new: "New file",
    open: "Open",
    copy: "Copy link",
    email: "Email",
    x: "X",
    ln: "LinkedIn",
    docs: "Documentation",
    del: "Delete",
  };

  function initDefaultMenuDemo() {
    const root = document.getElementById("astro-menu-default");
    const status = document.getElementById("astro-menu-default-status");
    if (!root || !status || root.dataset.demoWired) return;
    root.dataset.demoWired = "true";

    const state = { wrap: true, minimap: false, sort: "name", last: "—" };
    const paint = () => {
      status.textContent = `Word wrap: ${state.wrap ? "on" : "off"} · Minimap: ${
        state.minimap ? "on" : "off"
      } · Sort: ${state.sort} · Last action: ${state.last}`;
    };

    root.addEventListener("pindoba:menu:action", (e) => {
      const { id } = (e as CustomEvent<{ id: string }>).detail;
      state.last = LABELS[id] ?? id;
      paint();
    });
    root.addEventListener("pindoba:menu:checkedchange", (e) => {
      const { id, checked } = (
        e as CustomEvent<{ id: string; checked: boolean }>
      ).detail;
      if (id === "wrap") state.wrap = checked;
      if (id === "minimap") state.minimap = checked;
      paint();
    });
    root.addEventListener("pindoba:menu:valuechange", (e) => {
      const { groupId, value } = (
        e as CustomEvent<{ groupId: string; value: string }>
      ).detail;
      if (groupId === "sort") state.sort = value;
      paint();
    });
    paint();
  }

  initDefaultMenuDemo();
  document.addEventListener("astro:page-load", initDefaultMenuDemo);
</script>

Word wrap: on · Minimap: off · Sort: name · Last action: —

import { Button } from "@pindoba/react-button";
import { Kbd } from "@pindoba/react-kbd";
import { Stamp } from "@pindoba/react-stamp";
import type { MenuNode } from "@pindoba/core-menu";
import { useState, type ReactNode } from "react";
import { stack } from "@pindoba/styled-system/patterns";
import { Menu } from "../Menu";

/**
 * Minimal inlined Lucide-style glyphs for each item's leading `<Stamp>` —
 * the same mechanism the `rich-items` demo uses (see its own `Icon` helper).
 * Checkbox and radio items already render a built-in check indicator, so
 * they're left without a leading icon here.
 */
function Icon({ children }: { children: ReactNode }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      {children}
    </svg>
  );
}

const filePlusIcon = (
  <Icon>
    <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
    <path d="M14 2v5a1 1 0 0 0 1 1h5" />
    <path d="M9 15h6" />
    <path d="M12 18v-6" />
  </Icon>
);
const folderOpenIcon = (
  <Icon>
    <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2" />
  </Icon>
);
const share2Icon = (
  <Icon>
    <circle cx="18" cy="5" r="3" />
    <circle cx="6" cy="12" r="3" />
    <circle cx="18" cy="19" r="3" />
    <line x1="8.59" x2="15.42" y1="13.51" y2="17.49" />
    <line x1="15.41" x2="8.59" y1="6.51" y2="10.49" />
  </Icon>
);
const linkIcon = (
  <Icon>
    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
  </Icon>
);
const mailIcon = (
  <Icon>
    <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />
    <rect x="2" y="4" width="20" height="16" rx="2" />
  </Icon>
);
const usersIcon = (
  <Icon>
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
    <path d="M16 3.128a4 4 0 0 1 0 7.744" />
    <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
    <circle cx="9" cy="7" r="4" />
  </Icon>
);
const bookOpenIcon = (
  <Icon>
    <path d="M12 7v14" />
    <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
  </Icon>
);
const trash2Icon = (
  <Icon>
    <path d="M10 11v6" />
    <path d="M14 11v6" />
    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
    <path d="M3 6h18" />
    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
  </Icon>
);

/**
 * Real `<Kbd>` components for shortcuts, passed as each item's `trailing`
 * (a plain React node — no snippet indirection needed in React).
 */
export default function Default() {
  const [open, setOpen] = useState(false);
  const [lastAction, setLastAction] = useState("—");
  const [wrap, setWrap] = useState(true);
  const [minimap, setMinimap] = useState(false);
  const [sort, setSort] = useState("name");

  const items: MenuNode[] = [
    {
      type: "action",
      id: "new",
      label: "New file",
      leading: (
        <Stamp size="sm" emphasis="ghost">
          {filePlusIcon}
        </Stamp>
      ),
      trailing: <Kbd size="sm">⌘N</Kbd>,
      onSelect: () => setLastAction("New file"),
    },
    {
      type: "action",
      id: "open",
      label: "Open…",
      leading: (
        <Stamp size="sm" emphasis="ghost">
          {folderOpenIcon}
        </Stamp>
      ),
      trailing: <Kbd size="sm">⌘O</Kbd>,
      onSelect: () => setLastAction("Open"),
    },
    { type: "separator", id: "s1" },
    {
      type: "group",
      id: "view",
      label: "View",
      items: [
        {
          type: "checkbox",
          id: "wrap",
          label: "Word wrap",
          checked: wrap,
          onCheckedChange: (v) => setWrap(v),
        },
        {
          type: "checkbox",
          id: "minimap",
          label: "Minimap",
          checked: minimap,
          onCheckedChange: (v) => setMinimap(v),
        },
      ],
    },
    { type: "separator", id: "s2" },
    {
      type: "radiogroup",
      id: "sort",
      label: "Sort by",
      value: sort,
      onValueChange: (v) => setSort(v),
      items: [
        {
          type: "radio",
          id: "sort-name",
          label: "Name",
          value: "name",
        },
        {
          type: "radio",
          id: "sort-date",
          label: "Date modified",
          value: "date",
        },
        {
          type: "radio",
          id: "sort-size",
          label: "Size",
          value: "size",
        },
      ],
    },
    { type: "separator", id: "s3" },
    {
      type: "submenu",
      id: "share",
      label: "Share",
      leading: (
        <Stamp size="sm" emphasis="ghost">
          {share2Icon}
        </Stamp>
      ),
      items: [
        {
          type: "action",
          id: "copy",
          label: "Copy link",
          leading: (
            <Stamp size="sm" emphasis="ghost">
              {linkIcon}
            </Stamp>
          ),
          onSelect: () => setLastAction("Copy link"),
        },
        {
          type: "action",
          id: "email",
          label: "Email",
          leading: (
            <Stamp size="sm" emphasis="ghost">
              {mailIcon}
            </Stamp>
          ),
          onSelect: () => setLastAction("Email"),
        },
        {
          type: "submenu",
          id: "social",
          label: "Social",
          leading: (
            <Stamp size="sm" emphasis="ghost">
              {usersIcon}
            </Stamp>
          ),
          items: [
            {
              type: "action",
              id: "x",
              label: "X / Twitter",
              onSelect: () => setLastAction("X"),
            },
            {
              type: "action",
              id: "ln",
              label: "LinkedIn",
              onSelect: () => setLastAction("LinkedIn"),
            },
          ],
        },
      ],
    },
    { type: "separator", id: "s4" },
    {
      type: "link",
      id: "docs",
      label: "Documentation",
      leading: (
        <Stamp size="sm" emphasis="ghost">
          {bookOpenIcon}
        </Stamp>
      ),
      href: "https://pindoba.js.org",
      target: "_blank",
    },
    {
      type: "action",
      id: "del",
      label: "Delete",
      feedback: "danger",
      leading: (
        <Stamp size="sm" emphasis="ghost">
          {trash2Icon}
        </Stamp>
      ),
      trailing: <Kbd size="sm">⌫</Kbd>,
      onSelect: () => setLastAction("Delete"),
    },
  ];

  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Menu
        items={items}
        open={open}
        onOpenChange={setOpen}
        aria-label="File actions"
        trigger={(triggerProps) => (
          <Button {...triggerProps} emphasis="secondary">
            Actions
          </Button>
        )}
      />

      <p>
        Word wrap: {wrap ? "on" : "off"} · Minimap: {minimap ? "on" : "off"} ·
        Sort: {sort} · Last action: {lastAction}
      </p>
    </div>
  );
}

Word wrap: on · Minimap: off · Sort: name · Last action: —

<script lang="ts">
  import Menu from "../menu.svelte";
  import Button from "@pindoba/svelte-button";
  import Kbd from "@pindoba/svelte-kbd";
  import Stamp from "@pindoba/svelte-stamp";
  import { stack } from "@pindoba/styled-system/patterns";
  import FilePlus from "@lucide/svelte/icons/file-plus";
  import FolderOpen from "@lucide/svelte/icons/folder-open";
  import Share2 from "@lucide/svelte/icons/share-2";
  import Link from "@lucide/svelte/icons/link";
  import Mail from "@lucide/svelte/icons/mail";
  import Users from "@lucide/svelte/icons/users";
  import BookOpen from "@lucide/svelte/icons/book-open";
  import Trash2 from "@lucide/svelte/icons/trash-2";

  let open = $state(false);
  let lastAction = $state("—");

  // Checkbox + radio state lives in the consumer and flows back into `items`.
  let wrap = $state(true);
  let minimap = $state(false);
  let sort = $state("name");
</script>

<!-- Real <Kbd> components for shortcuts: passed as each item's `trailing`
     (a Svelte snippet), which flows through to the row's Banner. -->
{#snippet kbdN()}<Kbd size="sm">⌘N</Kbd>{/snippet}
{#snippet kbdO()}<Kbd size="sm">⌘O</Kbd>{/snippet}
{#snippet kbdBksp()}<Kbd size="sm">⌫</Kbd>{/snippet}

<!-- Real <Stamp> icons for leading glyphs: passed as each item's `leading`
     (a Svelte snippet), same mechanism as the `rich-items` demo. Checkbox
     and radio items already render a built-in check indicator, so they're
     left without a leading icon here. -->
{#snippet newStamp()}<Stamp size="sm" emphasis="ghost"
    ><FilePlus size={16} /></Stamp
  >{/snippet}
{#snippet openStamp()}<Stamp size="sm" emphasis="ghost"
    ><FolderOpen size={16} /></Stamp
  >{/snippet}
{#snippet shareStamp()}<Stamp size="sm" emphasis="ghost"
    ><Share2 size={16} /></Stamp
  >{/snippet}
{#snippet copyStamp()}<Stamp size="sm" emphasis="ghost"
    ><Link size={16} /></Stamp
  >{/snippet}
{#snippet emailStamp()}<Stamp size="sm" emphasis="ghost"
    ><Mail size={16} /></Stamp
  >{/snippet}
{#snippet socialStamp()}<Stamp size="sm" emphasis="ghost"
    ><Users size={16} /></Stamp
  >{/snippet}
{#snippet docsStamp()}<Stamp size="sm" emphasis="ghost"
    ><BookOpen size={16} /></Stamp
  >{/snippet}
{#snippet delStamp()}<Stamp size="sm" emphasis="ghost"
    ><Trash2 size={16} /></Stamp
  >{/snippet}

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Menu
    items={[
      {
        type: "action",
        id: "new",
        label: "New file",
        leading: newStamp,
        trailing: kbdN,
        onSelect: () => (lastAction = "New file"),
      },
      {
        type: "action",
        id: "open",
        label: "Open…",
        leading: openStamp,
        trailing: kbdO,
        onSelect: () => (lastAction = "Open"),
      },
      { type: "separator", id: "s1" },
      {
        type: "group",
        id: "view",
        label: "View",
        items: [
          {
            type: "checkbox",
            id: "wrap",
            label: "Word wrap",
            checked: wrap,
            onCheckedChange: (v) => (wrap = v),
          },
          {
            type: "checkbox",
            id: "minimap",
            label: "Minimap",
            checked: minimap,
            onCheckedChange: (v) => (minimap = v),
          },
        ],
      },
      { type: "separator", id: "s2" },
      {
        type: "radiogroup",
        id: "sort",
        label: "Sort by",
        value: sort,
        onValueChange: (v) => (sort = v),
        items: [
          { type: "radio", id: "sort-name", label: "Name", value: "name" },
          {
            type: "radio",
            id: "sort-date",
            label: "Date modified",
            value: "date",
          },
          { type: "radio", id: "sort-size", label: "Size", value: "size" },
        ],
      },
      { type: "separator", id: "s3" },
      {
        type: "submenu",
        id: "share",
        label: "Share",
        leading: shareStamp,
        items: [
          {
            type: "action",
            id: "copy",
            label: "Copy link",
            leading: copyStamp,
            onSelect: () => (lastAction = "Copy link"),
          },
          {
            type: "action",
            id: "email",
            label: "Email",
            leading: emailStamp,
            onSelect: () => (lastAction = "Email"),
          },
          {
            type: "submenu",
            id: "social",
            label: "Social",
            leading: socialStamp,
            items: [
              {
                type: "action",
                id: "x",
                label: "X / Twitter",
                onSelect: () => (lastAction = "X"),
              },
              {
                type: "action",
                id: "ln",
                label: "LinkedIn",
                onSelect: () => (lastAction = "LinkedIn"),
              },
            ],
          },
        ],
      },
      { type: "separator", id: "s4" },
      {
        type: "link",
        id: "docs",
        label: "Documentation",
        leading: docsStamp,
        href: "https://pindoba.js.org",
        target: "_blank",
      },
      {
        type: "action",
        id: "del",
        label: "Delete",
        feedback: "danger",
        leading: delStamp,
        trailing: kbdBksp,
        onSelect: () => (lastAction = "Delete"),
      },
    ]}
    bind:open
    aria-label="File actions"
  >
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps} emphasis="secondary">Actions</Button>
    {/snippet}
  </Menu>

  <p>
    Word wrap: {wrap ? "on" : "off"} · Minimap: {minimap ? "on" : "off"} · Sort: {sort}
    · Last action: {lastAction}
  </p>
</div>

Word wrap: on · Minimap: off · Sort: name · Last action: —

<script setup lang="ts">
import { computed, h, ref } from "vue";
import { Menu, type MenuNode } from "@pindoba/vue-menu";
import { Button } from "@pindoba/vue-button";
import { Kbd } from "@pindoba/vue-kbd";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";

const wrapperClass = stack({ gap: "sm", alignItems: "flex-start" });

const open = ref(false);
const lastAction = ref("—");

// Checkbox + radio state lives in the consumer and flows back into `items`.
const wrap = ref(true);
const minimap = ref(false);
const sort = ref("name");

// Minimal inlined Lucide-style glyphs for each item's leading <Stamp>, the
// same mechanism the `rich-items` demo uses — see its own `icon` helper.
// Checkbox and radio items already render a built-in check indicator, so
// they're left without a leading icon here.
const svgIcon = (...children: ReturnType<typeof h>[]) =>
  h(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: 16,
      height: 16,
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": 2,
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
      "aria-hidden": "true",
    },
    children,
  );
const path = (d: string) => h("path", { d });

const filePlusIcon = svgIcon(
  path(
    "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
  ),
  path("M14 2v5a1 1 0 0 0 1 1h5"),
  path("M9 15h6"),
  path("M12 18v-6"),
);
const folderOpenIcon = svgIcon(
  path(
    "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2",
  ),
);
const share2Icon = svgIcon(
  h("circle", { cx: 18, cy: 5, r: 3 }),
  h("circle", { cx: 6, cy: 12, r: 3 }),
  h("circle", { cx: 18, cy: 19, r: 3 }),
  h("line", { x1: 8.59, x2: 15.42, y1: 13.51, y2: 17.49 }),
  h("line", { x1: 15.41, x2: 8.59, y1: 6.51, y2: 10.49 }),
);
const linkIcon = svgIcon(
  path("M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"),
  path("M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"),
);
const mailIcon = svgIcon(
  path("m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"),
  h("rect", { x: 2, y: 4, width: 20, height: 16, rx: 2 }),
);
const usersIcon = svgIcon(
  path("M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"),
  path("M16 3.128a4 4 0 0 1 0 7.744"),
  path("M22 21v-2a4 4 0 0 0-3-3.87"),
  h("circle", { cx: 9, cy: 7, r: 4 }),
);
const bookOpenIcon = svgIcon(
  path("M12 7v14"),
  path(
    "M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z",
  ),
);
const trash2Icon = svgIcon(
  path("M10 11v6"),
  path("M14 11v6"),
  path("M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"),
  path("M3 6h18"),
  path("M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"),
);

// Real <Kbd> VNodes for shortcuts, passed as each item's `trailing` — flows
// through to the row's Banner.
const items = computed<MenuNode[]>(() => [
  {
    type: "action",
    id: "new",
    label: "New file",
    leading: h(Stamp, { size: "sm", emphasis: "ghost" }, () => filePlusIcon),
    trailing: h(Kbd, { size: "sm" }, () => "⌘N"),
    onSelect: () => (lastAction.value = "New file"),
  },
  {
    type: "action",
    id: "open",
    label: "Open…",
    leading: h(Stamp, { size: "sm", emphasis: "ghost" }, () => folderOpenIcon),
    trailing: h(Kbd, { size: "sm" }, () => "⌘O"),
    onSelect: () => (lastAction.value = "Open"),
  },
  { type: "separator", id: "s1" },
  {
    type: "group",
    id: "view",
    label: "View",
    items: [
      {
        type: "checkbox",
        id: "wrap",
        label: "Word wrap",
        checked: wrap.value,
        onCheckedChange: (v) => (wrap.value = v),
      },
      {
        type: "checkbox",
        id: "minimap",
        label: "Minimap",
        checked: minimap.value,
        onCheckedChange: (v) => (minimap.value = v),
      },
    ],
  },
  { type: "separator", id: "s2" },
  {
    type: "radiogroup",
    id: "sort",
    label: "Sort by",
    value: sort.value,
    onValueChange: (v) => (sort.value = v),
    items: [
      {
        type: "radio",
        id: "sort-name",
        label: "Name",
        value: "name",
      },
      {
        type: "radio",
        id: "sort-date",
        label: "Date modified",
        value: "date",
      },
      {
        type: "radio",
        id: "sort-size",
        label: "Size",
        value: "size",
      },
    ],
  },
  { type: "separator", id: "s3" },
  {
    type: "submenu",
    id: "share",
    label: "Share",
    leading: h(Stamp, { size: "sm", emphasis: "ghost" }, () => share2Icon),
    items: [
      {
        type: "action",
        id: "copy",
        label: "Copy link",
        leading: h(Stamp, { size: "sm", emphasis: "ghost" }, () => linkIcon),
        onSelect: () => (lastAction.value = "Copy link"),
      },
      {
        type: "action",
        id: "email",
        label: "Email",
        leading: h(Stamp, { size: "sm", emphasis: "ghost" }, () => mailIcon),
        onSelect: () => (lastAction.value = "Email"),
      },
      {
        type: "submenu",
        id: "social",
        label: "Social",
        leading: h(Stamp, { size: "sm", emphasis: "ghost" }, () => usersIcon),
        items: [
          {
            type: "action",
            id: "x",
            label: "X / Twitter",
            onSelect: () => (lastAction.value = "X"),
          },
          {
            type: "action",
            id: "ln",
            label: "LinkedIn",
            onSelect: () => (lastAction.value = "LinkedIn"),
          },
        ],
      },
    ],
  },
  { type: "separator", id: "s4" },
  {
    type: "link",
    id: "docs",
    label: "Documentation",
    leading: h(Stamp, { size: "sm", emphasis: "ghost" }, () => bookOpenIcon),
    href: "https://pindoba.js.org",
    target: "_blank",
  },
  {
    type: "action",
    id: "del",
    label: "Delete",
    feedback: "danger",
    leading: h(Stamp, { size: "sm", emphasis: "ghost" }, () => trash2Icon),
    trailing: h(Kbd, { size: "sm" }, () => "⌫"),
    onSelect: () => (lastAction.value = "Delete"),
  },
]);
</script>

<template>
  <div :class="wrapperClass">
    <Menu
      :open="open"
      :onOpenChange="(o: boolean) => (open = o)"
      :items="items"
      aria-label="File actions"
    >
      <template #trigger="triggerProps">
        <Button v-bind="triggerProps" emphasis="secondary">Actions</Button>
      </template>
    </Menu>

    <p>
      Word wrap: {{ wrap ? "on" : "off" }} · Minimap:
      {{ minimap ? "on" : "off" }} · Sort: {{ sort }} · Last action:
      {{ lastAction }}
    </p>
  </div>
</template>

Checkbox and radio items

menuitemcheckbox rows toggle independently and stay open by default so you can flip several in one visit; menuitemradio rows inside a radiogroup enforce single selection within that group. Both mirror their state onto aria-checked.

AstroReactSvelteVue

PreviewCode

---
import Menu from "../menu.astro";
import { stack } from "@pindoba/styled-system/patterns";
import type { MenuNode } from "@pindoba/core-menu";

// NOTE (Astro): the Svelte demo's leading <Check> / spacer snippets are omitted
// (see default.astro). Checked/selected state is server-rendered via
// aria-checked and mirrored into the status line below via events.
const items: MenuNode[] = [
  {
    type: "group",
    id: "view",
    label: "View",
    items: [
      { type: "checkbox", id: "wrap", label: "Word wrap", checked: true },
      { type: "checkbox", id: "minimap", label: "Minimap", checked: false },
    ],
  },
  { type: "separator", id: "s1" },
  {
    type: "radiogroup",
    id: "sort",
    label: "Sort by",
    value: "name",
    items: [
      { type: "radio", id: "sort-name", label: "Name", value: "name" },
      { type: "radio", id: "sort-date", label: "Date modified", value: "date" },
      { type: "radio", id: "sort-size", label: "Size", value: "size" },
    ],
  },
];
---

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Menu id="astro-menu-checkbox-radio" items={items} aria-label="View options">
    View options
  </Menu>
  <p id="astro-menu-checkbox-radio-status">
    Word wrap: on · Minimap: off · Sort: name
  </p>
</div>

<script>
  function initCheckboxRadioMenuDemo() {
    const root = document.getElementById("astro-menu-checkbox-radio");
    const status = document.getElementById("astro-menu-checkbox-radio-status");
    if (!root || !status || root.dataset.demoWired) return;
    root.dataset.demoWired = "true";

    const state = { wrap: true, minimap: false, sort: "name" };
    const paint = () => {
      status.textContent = `Word wrap: ${state.wrap ? "on" : "off"} · Minimap: ${
        state.minimap ? "on" : "off"
      } · Sort: ${state.sort}`;
    };

    root.addEventListener("pindoba:menu:checkedchange", (e) => {
      const { id, checked } = (
        e as CustomEvent<{ id: string; checked: boolean }>
      ).detail;
      if (id === "wrap") state.wrap = checked;
      if (id === "minimap") state.minimap = checked;
      paint();
    });
    root.addEventListener("pindoba:menu:valuechange", (e) => {
      const { groupId, value } = (
        e as CustomEvent<{ groupId: string; value: string }>
      ).detail;
      if (groupId === "sort") state.sort = value;
      paint();
    });
    paint();
  }

  initCheckboxRadioMenuDemo();
  document.addEventListener("astro:page-load", initCheckboxRadioMenuDemo);
</script>

Word wrap: on · Minimap: off · Sort: name

import { Button } from "@pindoba/react-button";
import type { MenuNode } from "@pindoba/core-menu";
import { useState } from "react";
import { stack } from "@pindoba/styled-system/patterns";
import { Menu } from "../Menu";

export default function CheckboxRadio() {
  const [open, setOpen] = useState(false);
  const [wrap, setWrap] = useState(true);
  const [minimap, setMinimap] = useState(false);
  const [sort, setSort] = useState("name");

  const items: MenuNode[] = [
    {
      type: "group",
      id: "view",
      label: "View",
      items: [
        {
          type: "checkbox",
          id: "wrap",
          label: "Word wrap",
          checked: wrap,
          onCheckedChange: (v) => setWrap(v),
        },
        {
          type: "checkbox",
          id: "minimap",
          label: "Minimap",
          checked: minimap,
          onCheckedChange: (v) => setMinimap(v),
        },
      ],
    },
    { type: "separator", id: "s1" },
    {
      type: "radiogroup",
      id: "sort",
      label: "Sort by",
      value: sort,
      onValueChange: (v) => setSort(v),
      items: [
        {
          type: "radio",
          id: "sort-name",
          label: "Name",
          value: "name",
        },
        {
          type: "radio",
          id: "sort-date",
          label: "Date modified",
          value: "date",
        },
        {
          type: "radio",
          id: "sort-size",
          label: "Size",
          value: "size",
        },
      ],
    },
  ];

  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Menu
        items={items}
        open={open}
        onOpenChange={setOpen}
        aria-label="View options"
        trigger={(triggerProps) => (
          <Button {...triggerProps} emphasis="secondary">
            View options
          </Button>
        )}
      />

      <p>
        Word wrap: {wrap ? "on" : "off"} · Minimap: {minimap ? "on" : "off"} ·
        Sort: {sort}
      </p>
    </div>
  );
}

Word wrap: on · Minimap: off · Sort: name

<script lang="ts">
  import Menu from "../menu.svelte";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";

  let open = $state(false);

  // Checkbox + radio state lives in the consumer and flows back into `items`.
  let wrap = $state(true);
  let minimap = $state(false);
  let sort = $state("name");
</script>

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Menu
    items={[
      {
        type: "group",
        id: "view",
        label: "View",
        items: [
          {
            type: "checkbox",
            id: "wrap",
            label: "Word wrap",
            checked: wrap,
            onCheckedChange: (v) => (wrap = v),
          },
          {
            type: "checkbox",
            id: "minimap",
            label: "Minimap",
            checked: minimap,
            onCheckedChange: (v) => (minimap = v),
          },
        ],
      },
      { type: "separator", id: "s1" },
      {
        type: "radiogroup",
        id: "sort",
        label: "Sort by",
        value: sort,
        onValueChange: (v) => (sort = v),
        items: [
          {
            type: "radio",
            id: "sort-name",
            label: "Name",
            value: "name",
          },
          {
            type: "radio",
            id: "sort-date",
            label: "Date modified",
            value: "date",
          },
          {
            type: "radio",
            id: "sort-size",
            label: "Size",
            value: "size",
          },
        ],
      },
    ]}
    bind:open
    aria-label="View options"
  >
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps} emphasis="secondary">View options</Button>
    {/snippet}
  </Menu>

  <p>
    Word wrap: {wrap ? "on" : "off"} · Minimap: {minimap ? "on" : "off"} · Sort: {sort}
  </p>
</div>

Word wrap: on · Minimap: off · Sort: name

<script setup lang="ts">
import { computed, ref } from "vue";
import { Menu, type MenuNode } from "@pindoba/vue-menu";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";

const wrapperClass = stack({ gap: "sm", alignItems: "flex-start" });

const open = ref(false);

// Checkbox + radio state lives in the consumer and flows back into `items`.
const wrap = ref(true);
const minimap = ref(false);
const sort = ref("name");

const items = computed<MenuNode[]>(() => [
  {
    type: "group",
    id: "view",
    label: "View",
    items: [
      {
        type: "checkbox",
        id: "wrap",
        label: "Word wrap",
        checked: wrap.value,
        onCheckedChange: (v) => (wrap.value = v),
      },
      {
        type: "checkbox",
        id: "minimap",
        label: "Minimap",
        checked: minimap.value,
        onCheckedChange: (v) => (minimap.value = v),
      },
    ],
  },
  { type: "separator", id: "s1" },
  {
    type: "radiogroup",
    id: "sort",
    label: "Sort by",
    value: sort.value,
    onValueChange: (v) => (sort.value = v),
    items: [
      {
        type: "radio",
        id: "sort-name",
        label: "Name",
        value: "name",
      },
      {
        type: "radio",
        id: "sort-date",
        label: "Date modified",
        value: "date",
      },
      {
        type: "radio",
        id: "sort-size",
        label: "Size",
        value: "size",
      },
    ],
  },
]);
</script>

<template>
  <div :class="wrapperClass">
    <Menu
      :open="open"
      :onOpenChange="(o: boolean) => (open = o)"
      :items="items"
      aria-label="View options"
    >
      <template #trigger="triggerProps">
        <Button v-bind="triggerProps" emphasis="secondary">View options</Button>
      </template>
    </Menu>

    <p>
      Word wrap: {{ wrap ? "on" : "off" }} · Minimap:
      {{ minimap ? "on" : "off" }} · Sort: {{ sort }}
    </p>
  </div>
</template>

Submenus

Hover a submenu trigger — or press → while it’s active — to open its panel; ← or Esc closes just that level, leaving parent levels open. Moving the pointer diagonally toward an open submenu’s panel keeps it open even while crossing sibling rows (the safe triangle), and each submenu panel overlaps its parent slightly so the two stay visually connected.

AstroReactSvelteVue

PreviewCode

---
import Menu from "../menu.astro";
import { stack } from "@pindoba/styled-system/patterns";
import type { MenuNode } from "@pindoba/core-menu";

const items: MenuNode[] = [
  { type: "action", id: "duplicate", label: "Duplicate" },
  { type: "separator", id: "s1" },
  {
    type: "submenu",
    id: "share",
    label: "Share",
    items: [
      { type: "action", id: "copy", label: "Copy link" },
      { type: "action", id: "email", label: "Email" },
      {
        type: "submenu",
        id: "social",
        label: "Social",
        items: [
          { type: "action", id: "x", label: "X / Twitter" },
          { type: "action", id: "ln", label: "LinkedIn" },
        ],
      },
    ],
  },
];
---

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Menu id="astro-menu-submenu" items={items} aria-label="Item actions">
    Actions
  </Menu>
  <p id="astro-menu-submenu-status">Last action: —</p>
</div>

<script>
  const LABELS: Record<string, string> = {
    duplicate: "Duplicate",
    copy: "Copy link",
    email: "Email",
    x: "X / Twitter",
    ln: "LinkedIn",
  };

  function initSubmenuMenuDemo() {
    const root = document.getElementById("astro-menu-submenu");
    const status = document.getElementById("astro-menu-submenu-status");
    if (!root || !status || root.dataset.demoWired) return;
    root.dataset.demoWired = "true";

    root.addEventListener("pindoba:menu:action", (e) => {
      const { id } = (e as CustomEvent<{ id: string }>).detail;
      status.textContent = `Last action: ${LABELS[id] ?? id}`;
    });
  }

  initSubmenuMenuDemo();
  document.addEventListener("astro:page-load", initSubmenuMenuDemo);
</script>

Last action: —

import { Button } from "@pindoba/react-button";
import type { MenuNode } from "@pindoba/core-menu";
import { useState } from "react";
import { stack } from "@pindoba/styled-system/patterns";
import { Menu } from "../Menu";

export default function Submenu() {
  const [open, setOpen] = useState(false);
  const [lastAction, setLastAction] = useState("—");

  const items: MenuNode[] = [
    {
      type: "action",
      id: "duplicate",
      label: "Duplicate",
      onSelect: () => setLastAction("Duplicate"),
    },
    { type: "separator", id: "s1" },
    {
      type: "submenu",
      id: "share",
      label: "Share",
      items: [
        {
          type: "action",
          id: "copy",
          label: "Copy link",
          onSelect: () => setLastAction("Copy link"),
        },
        {
          type: "action",
          id: "email",
          label: "Email",
          onSelect: () => setLastAction("Email"),
        },
        {
          type: "submenu",
          id: "social",
          label: "Social",
          items: [
            {
              type: "action",
              id: "x",
              label: "X / Twitter",
              onSelect: () => setLastAction("X / Twitter"),
            },
            {
              type: "action",
              id: "ln",
              label: "LinkedIn",
              onSelect: () => setLastAction("LinkedIn"),
            },
          ],
        },
      ],
    },
  ];

  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Menu
        items={items}
        open={open}
        onOpenChange={setOpen}
        aria-label="Item actions"
        trigger={(triggerProps) => (
          <Button {...triggerProps} emphasis="secondary">
            Actions
          </Button>
        )}
      />

      <p>Last action: {lastAction}</p>
    </div>
  );
}

Last action: —

<script lang="ts">
  import Menu from "../menu.svelte";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";

  let open = $state(false);
  let lastAction = $state("—");
</script>

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Menu
    items={[
      {
        type: "action",
        id: "duplicate",
        label: "Duplicate",
        onSelect: () => (lastAction = "Duplicate"),
      },
      { type: "separator", id: "s1" },
      {
        type: "submenu",
        id: "share",
        label: "Share",
        items: [
          {
            type: "action",
            id: "copy",
            label: "Copy link",
            onSelect: () => (lastAction = "Copy link"),
          },
          {
            type: "action",
            id: "email",
            label: "Email",
            onSelect: () => (lastAction = "Email"),
          },
          {
            type: "submenu",
            id: "social",
            label: "Social",
            items: [
              {
                type: "action",
                id: "x",
                label: "X / Twitter",
                onSelect: () => (lastAction = "X / Twitter"),
              },
              {
                type: "action",
                id: "ln",
                label: "LinkedIn",
                onSelect: () => (lastAction = "LinkedIn"),
              },
            ],
          },
        ],
      },
    ]}
    bind:open
    aria-label="Item actions"
  >
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps} emphasis="secondary">Actions</Button>
    {/snippet}
  </Menu>

  <p>Last action: {lastAction}</p>
</div>

Last action: —

<script setup lang="ts">
import { computed, ref } from "vue";
import { Menu, type MenuNode } from "@pindoba/vue-menu";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";

const wrapperClass = stack({ gap: "sm", alignItems: "flex-start" });

const open = ref(false);
const lastAction = ref("—");

const items = computed<MenuNode[]>(() => [
  {
    type: "action",
    id: "duplicate",
    label: "Duplicate",
    onSelect: () => (lastAction.value = "Duplicate"),
  },
  { type: "separator", id: "s1" },
  {
    type: "submenu",
    id: "share",
    label: "Share",
    items: [
      {
        type: "action",
        id: "copy",
        label: "Copy link",
        onSelect: () => (lastAction.value = "Copy link"),
      },
      {
        type: "action",
        id: "email",
        label: "Email",
        onSelect: () => (lastAction.value = "Email"),
      },
      {
        type: "submenu",
        id: "social",
        label: "Social",
        items: [
          {
            type: "action",
            id: "x",
            label: "X / Twitter",
            onSelect: () => (lastAction.value = "X / Twitter"),
          },
          {
            type: "action",
            id: "ln",
            label: "LinkedIn",
            onSelect: () => (lastAction.value = "LinkedIn"),
          },
        ],
      },
    ],
  },
]);
</script>

<template>
  <div :class="wrapperClass">
    <Menu
      :open="open"
      :onOpenChange="(o: boolean) => (open = o)"
      :items="items"
      aria-label="Item actions"
    >
      <template #trigger="triggerProps">
        <Button v-bind="triggerProps" emphasis="secondary">Actions</Button>
      </template>
    </Menu>

    <p>Last action: {{ lastAction }}</p>
  </div>
</template>

Destructive actions

Set feedback: "danger" on an action item to style it as destructive — useful for irreversible operations like deleting a resource.

AstroReactSvelteVue

PreviewCode

---
import Menu from "../menu.astro";
import { stack } from "@pindoba/styled-system/patterns";
import type { MenuNode } from "@pindoba/core-menu";

// The trailing ⌫ <Kbd> from the Svelte demo is omitted (see default.astro);
// the danger tone is driven server-side via the item's `feedback: "danger"`.
const items: MenuNode[] = [
  { type: "action", id: "rename", label: "Rename" },
  { type: "action", id: "duplicate", label: "Duplicate" },
  { type: "separator", id: "s1" },
  {
    type: "action",
    id: "delete",
    label: "Delete…",
    feedback: "danger",
    shortcut: "⌫",
  },
];
---

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Menu id="astro-menu-danger" items={items} aria-label="Item actions">
    Actions
  </Menu>
  <p id="astro-menu-danger-status">Last action: —</p>
</div>

<script>
  const LABELS: Record<string, string> = {
    rename: "Rename",
    duplicate: "Duplicate",
    delete: "Delete…",
  };

  function initDangerMenuDemo() {
    const root = document.getElementById("astro-menu-danger");
    const status = document.getElementById("astro-menu-danger-status");
    if (!root || !status || root.dataset.demoWired) return;
    root.dataset.demoWired = "true";

    root.addEventListener("pindoba:menu:action", (e) => {
      const { id } = (e as CustomEvent<{ id: string }>).detail;
      status.textContent = `Last action: ${LABELS[id] ?? id}`;
    });
  }

  initDangerMenuDemo();
  document.addEventListener("astro:page-load", initDangerMenuDemo);
</script>

Last action: —

import { Button } from "@pindoba/react-button";
import { Kbd } from "@pindoba/react-kbd";
import type { MenuNode } from "@pindoba/core-menu";
import { useState } from "react";
import { stack } from "@pindoba/styled-system/patterns";
import { Menu } from "../Menu";

export default function Danger() {
  const [open, setOpen] = useState(false);
  const [lastAction, setLastAction] = useState("—");

  const items: MenuNode[] = [
    {
      type: "action",
      id: "rename",
      label: "Rename",
      onSelect: () => setLastAction("Rename"),
    },
    {
      type: "action",
      id: "duplicate",
      label: "Duplicate",
      onSelect: () => setLastAction("Duplicate"),
    },
    { type: "separator", id: "s1" },
    {
      type: "action",
      id: "delete",
      label: "Delete…",
      feedback: "danger",
      trailing: <Kbd size="sm">⌫</Kbd>,
      onSelect: () => setLastAction("Delete…"),
    },
  ];

  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Menu
        items={items}
        open={open}
        onOpenChange={setOpen}
        aria-label="Item actions"
        trigger={(triggerProps) => (
          <Button {...triggerProps} emphasis="secondary">
            Actions
          </Button>
        )}
      />

      <p>Last action: {lastAction}</p>
    </div>
  );
}

Last action: —

<script lang="ts">
  import Menu from "../menu.svelte";
  import Button from "@pindoba/svelte-button";
  import Kbd from "@pindoba/svelte-kbd";
  import { stack } from "@pindoba/styled-system/patterns";

  let open = $state(false);
  let lastAction = $state("—");
</script>

{#snippet kbdBksp()}<Kbd size="sm">⌫</Kbd>{/snippet}

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Menu
    items={[
      {
        type: "action",
        id: "rename",
        label: "Rename",
        onSelect: () => (lastAction = "Rename"),
      },
      {
        type: "action",
        id: "duplicate",
        label: "Duplicate",
        onSelect: () => (lastAction = "Duplicate"),
      },
      { type: "separator", id: "s1" },
      {
        type: "action",
        id: "delete",
        label: "Delete…",
        feedback: "danger",
        trailing: kbdBksp,
        onSelect: () => (lastAction = "Delete…"),
      },
    ]}
    bind:open
    aria-label="Item actions"
  >
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps} emphasis="secondary">Actions</Button>
    {/snippet}
  </Menu>

  <p>Last action: {lastAction}</p>
</div>

Last action: —

<script setup lang="ts">
import { computed, h, ref } from "vue";
import { Menu, type MenuNode } from "@pindoba/vue-menu";
import { Button } from "@pindoba/vue-button";
import { Kbd } from "@pindoba/vue-kbd";
import { stack } from "@pindoba/styled-system/patterns";

const wrapperClass = stack({ gap: "sm", alignItems: "flex-start" });

const open = ref(false);
const lastAction = ref("—");

const items = computed<MenuNode[]>(() => [
  {
    type: "action",
    id: "rename",
    label: "Rename",
    onSelect: () => (lastAction.value = "Rename"),
  },
  {
    type: "action",
    id: "duplicate",
    label: "Duplicate",
    onSelect: () => (lastAction.value = "Duplicate"),
  },
  { type: "separator", id: "s1" },
  {
    type: "action",
    id: "delete",
    label: "Delete…",
    feedback: "danger",
    trailing: h(Kbd, { size: "sm" }, () => "⌫"),
    onSelect: () => (lastAction.value = "Delete…"),
  },
]);
</script>

<template>
  <div :class="wrapperClass">
    <Menu
      :open="open"
      :onOpenChange="(o: boolean) => (open = o)"
      :items="items"
      aria-label="Item actions"
    >
      <template #trigger="triggerProps">
        <Button v-bind="triggerProps" emphasis="secondary">Actions</Button>
      </template>
    </Menu>

    <p>Last action: {{ lastAction }}</p>
  </div>
</template>

Controlled open state

open is bindable, so a consumer can drive it from outside the component (a separate trigger, a keyboard shortcut, etc.). onOpenChange fires whenever the open state changes, whatever triggered it.

AstroReactSvelteVue

PreviewCode

---
import Menu from "../menu.astro";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
import type { MenuNode } from "@pindoba/core-menu";

// The open state is driven externally via the imperative `getMenu(root)` handle
// (Astro's equivalent of Svelte's bindable `open`); the menu also emits
// `pindoba:menu:openchange` so external UI can mirror it.
const items: MenuNode[] = [
  { type: "action", id: "new", label: "New file" },
  { type: "action", id: "open", label: "Open…" },
  { type: "action", id: "close", label: "Close" },
];
---

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Button id="astro-menu-controlled-toggle" emphasis="secondary">
    Toggle externally
  </Button>

  <Menu id="astro-menu-controlled" items={items} aria-label="File actions">
    Actions
  </Menu>

  <p id="astro-menu-controlled-status">Menu is closed · Last action: —</p>
</div>

<script>
  import { getMenu } from "../runtime";

  const LABELS: Record<string, string> = {
    new: "New file",
    open: "Open",
    close: "Close",
  };

  function initControlledMenuDemo() {
    const root = document.getElementById("astro-menu-controlled");
    const toggle = document.getElementById("astro-menu-controlled-toggle");
    const status = document.getElementById("astro-menu-controlled-status");
    if (!root || !toggle || !status || root.dataset.demoWired) return;
    root.dataset.demoWired = "true";

    const state = { open: false, last: "—" };
    const paint = () => {
      status.textContent = `Menu is ${
        state.open ? "open" : "closed"
      } · Last action: ${state.last}`;
    };

    toggle.addEventListener("click", () => getMenu(root)?.toggle());
    root.addEventListener("pindoba:menu:openchange", (e) => {
      state.open = (e as CustomEvent<{ open: boolean }>).detail.open;
      paint();
    });
    root.addEventListener("pindoba:menu:action", (e) => {
      const { id } = (e as CustomEvent<{ id: string }>).detail;
      state.last = LABELS[id] ?? id;
      paint();
    });
    paint();
  }

  initControlledMenuDemo();
  document.addEventListener("astro:page-load", initControlledMenuDemo);
</script>

Menu is closed · Last action: —

import { Button } from "@pindoba/react-button";
import type { MenuNode } from "@pindoba/core-menu";
import { useState } from "react";
import { stack } from "@pindoba/styled-system/patterns";
import { Menu } from "../Menu";

export default function Controlled() {
  const [open, setOpen] = useState(false);
  const [lastAction, setLastAction] = useState("—");

  const items: MenuNode[] = [
    {
      type: "action",
      id: "new",
      label: "New file",
      onSelect: () => setLastAction("New file"),
    },
    {
      type: "action",
      id: "open",
      label: "Open…",
      onSelect: () => setLastAction("Open"),
    },
    {
      type: "action",
      id: "close",
      label: "Close",
      onSelect: () => setLastAction("Close"),
    },
  ];

  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Button emphasis="secondary" onClick={() => setOpen((v) => !v)}>
        Toggle externally
      </Button>

      <Menu
        items={items}
        open={open}
        onOpenChange={setOpen}
        aria-label="File actions"
        trigger={(triggerProps) => (
          <Button {...triggerProps} emphasis="secondary">
            Actions
          </Button>
        )}
      />

      <p>
        Menu is {open ? "open" : "closed"} · Last action: {lastAction}
      </p>
    </div>
  );
}

Menu is closed · Last action: —

<script lang="ts">
  import Menu from "../menu.svelte";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";

  let open = $state(false);
  let lastAction = $state("—");

  function onOpenChange(next: boolean) {
    open = next;
  }
</script>

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Button emphasis="secondary" onclick={() => (open = !open)}>
    Toggle externally
  </Button>

  <Menu
    items={[
      {
        type: "action",
        id: "new",
        label: "New file",
        onSelect: () => (lastAction = "New file"),
      },
      {
        type: "action",
        id: "open",
        label: "Open…",
        onSelect: () => (lastAction = "Open"),
      },
      {
        type: "action",
        id: "close",
        label: "Close",
        onSelect: () => (lastAction = "Close"),
      },
    ]}
    bind:open
    {onOpenChange}
    aria-label="File actions"
  >
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps} emphasis="secondary">Actions</Button>
    {/snippet}
  </Menu>

  <p>Menu is {open ? "open" : "closed"} · Last action: {lastAction}</p>
</div>

Menu is closed · Last action: —

<script setup lang="ts">
import { computed, ref } from "vue";
import { Menu, type MenuNode } from "@pindoba/vue-menu";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";

const wrapperClass = stack({ gap: "sm", alignItems: "flex-start" });

const open = ref(false);
const lastAction = ref("—");

function onOpenChange(next: boolean) {
  open.value = next;
}

const items = computed<MenuNode[]>(() => [
  {
    type: "action",
    id: "new",
    label: "New file",
    onSelect: () => (lastAction.value = "New file"),
  },
  {
    type: "action",
    id: "open",
    label: "Open…",
    onSelect: () => (lastAction.value = "Open"),
  },
  {
    type: "action",
    id: "close",
    label: "Close",
    onSelect: () => (lastAction.value = "Close"),
  },
]);
</script>

<template>
  <div :class="wrapperClass">
    <Button emphasis="secondary" :onClick="() => (open = !open)">
      Toggle externally
    </Button>

    <Menu
      :open="open"
      :onOpenChange="onOpenChange"
      :items="items"
      aria-label="File actions"
    >
      <template #trigger="triggerProps">
        <Button v-bind="triggerProps" emphasis="secondary">Actions</Button>
      </template>
    </Menu>

    <p>
      Menu is {{ open ? "open" : "closed" }} · Last action: {{ lastAction }}
    </p>
  </div>
</template>

Rich items

Menu items render through ListBox’s Banner, so an action item can carry a description (the Banner subheading) alongside its label, plus leading and trailing content — icons via Stamp, a Badge, or a keyboard shortcut. Svelte, React, and Vue pass real components/snippets/nodes for leading and trailing in items; Astro takes the same content through per-item named slots — the same convention ListBox itself uses — keyed <itemId>:leading / <itemId>:trailing, e.g. <Stamp slot="acme:leading">…</Stamp> as a child of <Menu>. Menu resolves its own slots and forwards them to whichever nested ListBox level actually renders that item, so it works for items inside submenus too.

AstroReactSvelteVue

PreviewCode

---
import Menu from "../menu.astro";
import Stamp from "@pindoba/astro-stamp";
import Badge from "@pindoba/astro-badge";
import { Building2, Globe, Plus } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
import type { MenuNode } from "@pindoba/core-menu";

// Each item's content renders through ListBox's Banner, same as Svelte/React/
// Vue — Astro just authors it via per-item NAMED slots (`<id>:leading` /
// `<id>:trailing`) instead of passing components through `items` (Astro's
// item data is JSON-serialized for hydration, so components can't ride
// along). Menu forwards its own resolved slots down to whichever nested
// ListBox level actually renders that item — see `menu.astro`'s
// `optionSlotsHtml` — so this works identically for a submenu's items, not
// just the root level.
const items: MenuNode[] = [
  {
    type: "action",
    id: "acme",
    label: "Acme Inc",
    description: "12 members",
  },
  {
    type: "action",
    id: "globex",
    label: "Globex Corp",
    description: "48 members",
  },
  { type: "separator", id: "s1" },
  {
    type: "submenu",
    id: "more",
    label: "More workspaces",
    items: [
      {
        type: "action",
        id: "initech",
        label: "Initech",
        description: "8 members",
      },
      {
        type: "action",
        id: "umbrella",
        label: "Umbrella Corp",
        description: "120 members",
      },
    ],
  },
  { type: "separator", id: "s2" },
  { type: "action", id: "create", label: "Create workspace…" },
];
---

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Menu id="astro-menu-rich-items" items={items} aria-label="Switch workspace">
    Switch workspace

    <Stamp slot="acme:leading" size="md"><Building2 /></Stamp>

    <Stamp slot="globex:leading" size="md"><Globe /></Stamp>
    <Badge slot="globex:trailing" size="sm" feedback="success">Pro</Badge>

    <Stamp slot="more:leading" size="md"><Building2 /></Stamp>

    <Stamp slot="initech:leading" size="md"><Building2 /></Stamp>

    <Stamp slot="umbrella:leading" size="md"><Globe /></Stamp>

    <Stamp slot="create:leading" size="md"><Plus /></Stamp>
  </Menu>
  <p id="astro-menu-rich-items-status">Last action: —</p>
</div>

<script>
  const LABELS: Record<string, string> = {
    acme: "Acme Inc",
    globex: "Globex Corp",
    initech: "Initech",
    umbrella: "Umbrella Corp",
    create: "Create workspace…",
  };

  function initRichItemsMenuDemo() {
    const root = document.getElementById("astro-menu-rich-items");
    const status = document.getElementById("astro-menu-rich-items-status");
    if (!root || !status || root.dataset.demoWired) return;
    root.dataset.demoWired = "true";

    const state = { last: "—" };
    const paint = () => {
      status.textContent = `Last action: ${state.last}`;
    };

    root.addEventListener("pindoba:menu:action", (e) => {
      const { id } = (e as CustomEvent<{ id: string }>).detail;
      state.last = LABELS[id] ?? id;
      paint();
    });
    paint();
  }

  initRichItemsMenuDemo();
  document.addEventListener("astro:page-load", initRichItemsMenuDemo);
</script>

Last action: —

import { Button } from "@pindoba/react-button";
import { Stamp } from "@pindoba/react-stamp";
import { Badge } from "@pindoba/react-badge";
import type { MenuNode } from "@pindoba/core-menu";
import { useState } from "react";
import { stack } from "@pindoba/styled-system/patterns";
import { Menu } from "../Menu";

/**
 * Each item's content renders through ListBox's Banner, so `leading` /
 * `trailing` take real React nodes: a leading `<Stamp>` icon plus a
 * `description` (the Banner subheading), and a trailing `<Badge>` on the
 * "Pro" workspace. The plain "Create workspace…" action only sets a leading
 * icon.
 */
function Icon({ d }: { d: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d={d} />
    </svg>
  );
}

const buildingIcon = (
  <Icon d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2 M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2 M10 6h4 M10 10h4 M10 14h4 M10 18h4" />
);
const globeIcon = (
  <Icon d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10Z M2 12h20" />
);
const plusIcon = <Icon d="M5 12h14 M12 5v14" />;

export default function RichItems() {
  const [open, setOpen] = useState(false);
  const [lastAction, setLastAction] = useState("—");

  const items: MenuNode[] = [
    {
      type: "action",
      id: "acme",
      label: "Acme Inc",
      description: "12 members",
      leading: <Stamp size="md">{buildingIcon}</Stamp>,
      onSelect: () => setLastAction("Acme Inc"),
    },
    {
      type: "action",
      id: "globex",
      label: "Globex Corp",
      description: "48 members",
      leading: <Stamp size="md">{globeIcon}</Stamp>,
      trailing: (
        <Badge size="sm" feedback="success">
          Pro
        </Badge>
      ),
      onSelect: () => setLastAction("Globex Corp"),
    },
    { type: "separator", id: "s1" },
    {
      type: "submenu",
      id: "more",
      label: "More workspaces",
      leading: <Stamp size="md">{buildingIcon}</Stamp>,
      items: [
        {
          type: "action",
          id: "initech",
          label: "Initech",
          description: "8 members",
          leading: <Stamp size="md">{buildingIcon}</Stamp>,
          onSelect: () => setLastAction("Initech"),
        },
        {
          type: "action",
          id: "umbrella",
          label: "Umbrella Corp",
          description: "120 members",
          leading: <Stamp size="md">{globeIcon}</Stamp>,
          onSelect: () => setLastAction("Umbrella Corp"),
        },
      ],
    },
    { type: "separator", id: "s2" },
    {
      type: "action",
      id: "create",
      label: "Create workspace…",
      leading: <Stamp size="md">{plusIcon}</Stamp>,
      onSelect: () => setLastAction("Create workspace…"),
    },
  ];

  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Menu
        items={items}
        open={open}
        onOpenChange={setOpen}
        aria-label="Switch workspace"
        trigger={(triggerProps) => (
          <Button {...triggerProps} emphasis="secondary">
            Switch workspace
          </Button>
        )}
      />

      <p>Last action: {lastAction}</p>
    </div>
  );
}

Last action: —

<script lang="ts">
  import Menu from "../menu.svelte";
  import Button from "@pindoba/svelte-button";
  import Stamp from "@pindoba/svelte-stamp";
  import Badge from "@pindoba/svelte-badge";
  import { stack } from "@pindoba/styled-system/patterns";
  import Building2 from "@lucide/svelte/icons/building-2";
  import Globe from "@lucide/svelte/icons/globe";
  import Plus from "@lucide/svelte/icons/plus";

  let open = $state(false);
  let lastAction = $state("—");
</script>

<!-- Each item's content renders through ListBox's Banner, so `leading` /
     `trailing` take real components: a leading <Stamp> icon plus a
     `description` (the Banner subheading), and a trailing <Badge> on the
     "Pro" workspace. The plain "Create workspace…" action only sets a
     leading icon. -->
{#snippet acmeStamp()}<Stamp size="md"><Building2 size={16} /></Stamp>{/snippet}
{#snippet globexStamp()}<Stamp size="md"><Globe size={16} /></Stamp>{/snippet}
{#snippet proBadge()}<Badge size="sm" feedback="success">Pro</Badge>{/snippet}
{#snippet createStamp()}<Stamp size="md"><Plus size={16} /></Stamp>{/snippet}

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Menu
    items={[
      {
        type: "action",
        id: "acme",
        label: "Acme Inc",
        description: "12 members",
        leading: acmeStamp,
        onSelect: () => (lastAction = "Acme Inc"),
      },
      {
        type: "action",
        id: "globex",
        label: "Globex Corp",
        description: "48 members",
        leading: globexStamp,
        trailing: proBadge,
        onSelect: () => (lastAction = "Globex Corp"),
      },
      { type: "separator", id: "s1" },
      {
        type: "submenu",
        id: "more",
        label: "More workspaces",
        leading: acmeStamp,
        items: [
          {
            type: "action",
            id: "initech",
            label: "Initech",
            description: "8 members",
            leading: acmeStamp,
            onSelect: () => (lastAction = "Initech"),
          },
          {
            type: "action",
            id: "umbrella",
            label: "Umbrella Corp",
            description: "120 members",
            leading: globexStamp,
            onSelect: () => (lastAction = "Umbrella Corp"),
          },
        ],
      },
      { type: "separator", id: "s2" },
      {
        type: "action",
        id: "create",
        label: "Create workspace…",
        leading: createStamp,
        onSelect: () => (lastAction = "Create workspace…"),
      },
    ]}
    bind:open
    aria-label="Switch workspace"
  >
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps} emphasis="secondary">Switch workspace</Button>
    {/snippet}
  </Menu>

  <p>Last action: {lastAction}</p>
</div>

Last action: —

<script setup lang="ts">
import { h, ref } from "vue";
import { Menu, type MenuNode } from "@pindoba/vue-menu";
import { Button } from "@pindoba/vue-button";
import { Stamp } from "@pindoba/vue-stamp";
import { Badge } from "@pindoba/vue-badge";
import { stack } from "@pindoba/styled-system/patterns";

const wrapperClass = stack({ gap: "sm", alignItems: "flex-start" });

const open = ref(false);
const lastAction = ref("—");

// Each item's content renders through ListBox's Banner, so `leading` /
// `trailing` take real VNodes: a leading <Stamp> icon plus a `description`
// (the Banner subheading), and a trailing <Badge> on the "Pro" workspace.
// The plain "Create workspace…" action only sets a leading icon.
const icon = (d: string) =>
  h(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: 16,
      height: 16,
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": 2,
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
      "aria-hidden": "true",
    },
    [h("path", { d })],
  );

const buildingIcon = icon(
  "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2 M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2 M10 6h4 M10 10h4 M10 14h4 M10 18h4",
);
const globeIcon = icon(
  "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10Z M2 12h20",
);
const plusIcon = icon("M5 12h14 M12 5v14");

const items = ref<MenuNode[]>([
  {
    type: "action",
    id: "acme",
    label: "Acme Inc",
    description: "12 members",
    leading: h(Stamp, { size: "md" }, () => buildingIcon),
    onSelect: () => (lastAction.value = "Acme Inc"),
  },
  {
    type: "action",
    id: "globex",
    label: "Globex Corp",
    description: "48 members",
    leading: h(Stamp, { size: "md" }, () => globeIcon),
    trailing: h(Badge, { size: "sm", feedback: "success" }, () => "Pro"),
    onSelect: () => (lastAction.value = "Globex Corp"),
  },
  { type: "separator", id: "s1" },
  {
    type: "submenu",
    id: "more",
    label: "More workspaces",
    leading: h(Stamp, { size: "md" }, () => buildingIcon),
    items: [
      {
        type: "action",
        id: "initech",
        label: "Initech",
        description: "8 members",
        leading: h(Stamp, { size: "md" }, () => buildingIcon),
        onSelect: () => (lastAction.value = "Initech"),
      },
      {
        type: "action",
        id: "umbrella",
        label: "Umbrella Corp",
        description: "120 members",
        leading: h(Stamp, { size: "md" }, () => globeIcon),
        onSelect: () => (lastAction.value = "Umbrella Corp"),
      },
    ],
  },
  { type: "separator", id: "s2" },
  {
    type: "action",
    id: "create",
    label: "Create workspace…",
    leading: h(Stamp, { size: "md" }, () => plusIcon),
    onSelect: () => (lastAction.value = "Create workspace…"),
  },
]);
</script>

<template>
  <div :class="wrapperClass">
    <Menu
      :open="open"
      :onOpenChange="(o: boolean) => (open = o)"
      :items="items"
      aria-label="Switch workspace"
    >
      <template #trigger="triggerProps">
        <Button v-bind="triggerProps" emphasis="secondary"
          >Switch workspace</Button
        >
      </template>
    </Menu>

    <p>Last action: {{ lastAction }}</p>
  </div>
</template>

Custom content

A type: "custom" node drops non-interactive content anywhere in the menu — an account header, a footer info row, a shortcut legend. It renders role="presentation" and is skipped by keyboard navigation and typeahead, so the menu keeps valid role="menu" semantics; arrow keys move straight past it to the real items. Content rides the same per-framework path as leading / trailing: Svelte/React/Vue pass a snippet / node / VNode in content; Astro authors it as a named slot keyed by the node id (e.g. <Fragment slot="account">). Keep custom blocks presentational — put focusable controls in real menu items, not inside a custom block.

The example below reproduces a typical account menu: a header block with the signed-in identity, a separator, then a destructive Sair action.

AstroReactSvelteVue

PreviewCode

---
import Menu from "../menu.astro";
import Stamp from "@pindoba/astro-stamp";
import { LogOut, ChevronDown } from "@lucide/astro";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";
import type { MenuNode } from "@pindoba/core-menu";

// The non-interactive account header is a `type:"custom"` node. Astro can't
// carry components in `items` (they're JSON-serialized for hydration), so the
// content is authored as a NAMED slot keyed by the node id (`account`) — the
// same convention the rich-item `<id>:leading` slots use. Menu forwards it down
// to the ListBox via `customSlotsHtml`. The block is skipped by keyboard
// navigation, so arrows land straight on "Sair".
const items: MenuNode[] = [
  { type: "custom", id: "account", "aria-label": "Signed in as Demo Cubos" },
  { type: "separator", id: "s1" },
  { type: "action", id: "sign-out", label: "Sair", feedback: "danger" },
];

const nameClass = css({ fontWeight: "bold", color: "colorPalette.text.bold" });
const emailClass = css({ fontSize: "sm", color: "colorPalette.text.muted" });
---

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Menu id="astro-menu-account" items={items} aria-label="Account menu">
    Demo Cubos
    <ChevronDown />

    <Fragment slot="account">
      <span class={nameClass}>Demo Cubos</span>
      <span class={emailClass}>demo@cubos.dev</span>
    </Fragment>

    <Stamp slot="sign-out:leading" emphasis="ghost"><LogOut /></Stamp>
  </Menu>
  <p id="astro-menu-account-status">Last action: —</p>
</div>

<script>
  function initAccountMenuDemo() {
    const root = document.getElementById("astro-menu-account");
    const status = document.getElementById("astro-menu-account-status");
    if (!root || !status || root.dataset.demoWired) return;
    root.dataset.demoWired = "true";

    root.addEventListener("pindoba:menu:action", (e) => {
      const { id } = (e as CustomEvent<{ id: string }>).detail;
      status.textContent = `Last action: ${id === "sign-out" ? "Sair" : id}`;
    });
  }

  initAccountMenuDemo();
  document.addEventListener("astro:page-load", initAccountMenuDemo);
</script>

Last action: —

import { Button } from "@pindoba/react-button";
import { Stamp } from "@pindoba/react-stamp";
import type { MenuNode } from "@pindoba/core-menu";
import { useState } from "react";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";
import { Menu } from "../Menu";

function Icon({ d }: { d: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d={d} />
    </svg>
  );
}

const logOutIcon = (
  <Icon d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4 M16 17l5-5-5-5 M21 12H9" />
);
const chevronIcon = <Icon d="m6 9 6 6 6-6" />;

const nameClass = css({ fontWeight: "bold", color: "colorPalette.text.bold" });
const emailClass = css({ fontSize: "sm", color: "colorPalette.text.muted" });

export default function Account() {
  const [open, setOpen] = useState(false);
  const [lastAction, setLastAction] = useState("—");

  // The non-interactive account header rides in as a `type:"custom"` node — its
  // `content` is arbitrary React, and it's skipped by keyboard navigation so
  // arrows land straight on "Sair".
  const items: MenuNode[] = [
    {
      type: "custom",
      id: "account",
      "aria-label": "Signed in as Demo Cubos, demo@cubos.dev",
      content: (
        <>
          <span className={nameClass}>Demo Cubos</span>
          <span className={emailClass}>demo@cubos.dev</span>
        </>
      ),
    },
    { type: "separator", id: "s1" },
    {
      type: "action",
      id: "sign-out",
      label: "Sair",
      feedback: "danger",
      leading: <Stamp emphasis="ghost">{logOutIcon}</Stamp>,
      onSelect: () => setLastAction("Sair"),
    },
  ];

  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Menu
        items={items}
        open={open}
        onOpenChange={setOpen}
        aria-label="Account menu"
        trigger={(triggerProps) => (
          <Button {...triggerProps} emphasis="secondary">
            Demo Cubos
            {chevronIcon}
          </Button>
        )}
      />

      <p>Last action: {lastAction}</p>
    </div>
  );
}

Last action: —

<script lang="ts">
  import Menu from "../menu.svelte";
  import Button from "@pindoba/svelte-button";
  import Stamp from "@pindoba/svelte-stamp";
  import { css } from "@pindoba/styled-system/css";
  import { stack } from "@pindoba/styled-system/patterns";
  import LogOut from "@lucide/svelte/icons/log-out";
  import ChevronDown from "@lucide/svelte/icons/chevron-down";

  let open = $state(false);
  let lastAction = $state("—");

  // The non-interactive account header: arbitrary content dropped into the menu
  // via a `type:"custom"` node. It carries its own two-line type styling and is
  // skipped by keyboard navigation — arrows land straight on "Sair".
  const nameClass = css({
    fontWeight: "bold",
    color: "colorPalette.text.bold",
  });
  const emailClass = css({ fontSize: "sm", color: "colorPalette.text.muted" });
</script>

{#snippet accountHeader()}
  <span class={nameClass}>Demo Cubos</span>
  <span class={emailClass}>demo@cubos.dev</span>
{/snippet}

{#snippet signOutIcon()}<Stamp emphasis="ghost"><LogOut size={16} /></Stamp
  >{/snippet}

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Menu
    items={[
      {
        type: "custom",
        id: "account",
        content: accountHeader,
        "aria-label": "Signed in as Demo Cubos, demo@cubos.dev",
      },
      { type: "separator", id: "s1" },
      {
        type: "action",
        id: "sign-out",
        label: "Sair",
        leading: signOutIcon,
        feedback: "danger",
        onSelect: () => (lastAction = "Sair"),
      },
    ]}
    bind:open
    aria-label="Account menu"
  >
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps} emphasis="secondary">
        Demo Cubos
        <ChevronDown size={16} />
      </Button>
    {/snippet}
  </Menu>

  <p>Last action: {lastAction}</p>
</div>

Last action: —

<script setup lang="ts">
import { computed, h, ref } from "vue";
import { Menu, type MenuNode } from "@pindoba/vue-menu";
import { Button } from "@pindoba/vue-button";
import { Stamp } from "@pindoba/vue-stamp";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const wrapperClass = stack({ gap: "sm", alignItems: "flex-start" });
const nameClass = css({ fontWeight: "bold", color: "colorPalette.text.bold" });
const emailClass = css({ fontSize: "sm", color: "colorPalette.text.muted" });

const open = ref(false);
const lastAction = ref("—");

const icon = (d: string) =>
  h(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: 16,
      height: 16,
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": 2,
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
      "aria-hidden": "true",
    },
    [h("path", { d })],
  );

const logOutIcon = icon(
  "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4 M16 17l5-5-5-5 M21 12H9",
);
const chevronIcon = icon("m6 9 6 6 6-6");

// The non-interactive account header rides in as a `type:"custom"` node — its
// `content` is arbitrary VNodes, and it's skipped by keyboard navigation so
// arrows land straight on "Sair".
const items = computed<MenuNode[]>(() => [
  {
    type: "custom",
    id: "account",
    "aria-label": "Signed in as Demo Cubos, demo@cubos.dev",
    content: [
      h("span", { class: nameClass }, "Demo Cubos"),
      h("span", { class: emailClass }, "demo@cubos.dev"),
    ],
  },
  { type: "separator", id: "s1" },
  {
    type: "action",
    id: "sign-out",
    label: "Sair",
    feedback: "danger",
    leading: h(Stamp, { emphasis: "ghost" }, () => logOutIcon),
    onSelect: () => (lastAction.value = "Sair"),
  },
]);
</script>

<template>
  <div :class="wrapperClass">
    <Menu
      :open="open"
      :onOpenChange="(o: boolean) => (open = o)"
      :items="items"
      aria-label="Account menu"
    >
      <template #trigger="triggerProps">
        <Button v-bind="triggerProps" emphasis="secondary">
          Demo Cubos
          <component :is="chevronIcon" />
        </Button>
      </template>
    </Menu>

    <p>Last action: {{ lastAction }}</p>
  </div>
</template>

A group’s header can also be rich content instead of a plain label: set header on the group node (Svelte/React/Vue) — it wins over label and renders in the section’s header slot, letting a group title carry an icon or its own type styling.

#Default

#Checkbox and radio items

#Submenus

#Destructive actions

#Controlled open state

#Rich items

#Custom content

Default

Checkbox and radio items

Submenus

Destructive actions

Controlled open state

Rich items

Custom content