MenuExamples.tsrx
import { Button, Menu, MenuItem } from "@octaneui/core";

export function MenuExamples() @{
  <>
    <Button
      command="toggle-popover"
      commandfor="account-menu"
      aria-haspopup="menu"
    >
      Account
    </Button>
    <Menu id="account-menu" aria-label="Account">
      <MenuItem>Profile</MenuItem>
      <MenuItem>Settings</MenuItem>
      <MenuItem>Sign out</MenuItem>
    </Menu>
  </>
}

Icons

MenuIconsExample.tsrx
import { Button, Menu, MenuItem } from "@octaneui/core";
import { LogOut, Settings, User } from "@octaneui/icons/lucide";

export function MenuIconsExample() @{
  <>
    <Button
      command="toggle-popover"
      commandfor="account-icons-menu"
      aria-haspopup="menu"
    >
      Account
    </Button>
    <Menu id="account-icons-menu" aria-label="Account">
      <MenuItem left={<User size={16} />}>Profile</MenuItem>
      <MenuItem left={<Settings size={16} />}>Settings</MenuItem>
      <MenuItem left={<LogOut size={16} />}>Sign out</MenuItem>
    </Menu>
  </>
}

Separators and disabled items

MenuDisabledExample.tsrx
import { Button, Menu, MenuItem, MenuSeparator } from "@octaneui/core";

export function MenuDisabledExample() @{
  <>
    <Button
      command="toggle-popover"
      commandfor="file-menu"
      aria-haspopup="menu"
    >
      File
    </Button>
    <Menu id="file-menu" aria-label="File">
      <MenuItem>New</MenuItem>
      <MenuItem>Open</MenuItem>
      <MenuItem disabled>Save</MenuItem>
      <MenuSeparator />
      <MenuItem>Export</MenuItem>
    </Menu>
  </>
}

Actions

Handle onClick on a MenuItem to run an action. The menu closes after a successful click unless you preventDefault().

Last action: None

MenuActionsExample.tsrx
import { useState } from "octane";
import { Button, Menu, MenuItem } from "@octaneui/core";

export function MenuActionsExample() @{
  const [last, setLast] = useState("None");
  <div class="stack">
    <Button
      command="toggle-popover"
      commandfor="actions-menu"
      aria-haspopup="menu"
    >
      Actions
    </Button>
    <Menu id="actions-menu" aria-label="Actions">
      <MenuItem onClick={() => setLast("Duplicate")}>Duplicate</MenuItem>
      <MenuItem onClick={() => setLast("Archive")}>Archive</MenuItem>
      <MenuItem onClick={() => setLast("Delete")}>Delete</MenuItem>
    </Menu>
    <p class="status">Last action: {last}</p>

    <style>
      .stack {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
      }
      .status {
        margin: 0;
        color: var(--oc-text-secondary);
      }
    </style>
  </div>
}