Widget Menu

Widget-specific actions/configuration.

html

<details class="wmenu" style="--c:#241430;" >
  <summary class="wmenu__trigger" style="width:26px;height:26px;" aria-label="Revenue widget options">⋯</summary>
  <ul class="wmenu__list">
    <li><button type="button">Refresh</button></li>
    <li><button type="button">Export</button></li>
    <li><button type="button" class="wmenu__danger">Remove</button></li>
  </ul>
</details>
<style>
.wmenu { position: relative; font: 13px system-ui, sans-serif; color: #241430; }
.wmenu__trigger { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #24143022; border-radius: 6px; background: #FAF7F2; cursor: pointer; list-style: none; color: var(--c); }
.wmenu__trigger::-webkit-details-marker { display: none; }
.wmenu__trigger:focus-visible { outline: 2px solid var(--c); }
.wmenu__list { position: absolute; z-index: 1; margin: 4px 0 0; padding: 6px; list-style: none; border: 1px solid #24143022; border-radius: 8px; background: #FAF7F2; min-width: 120px; box-shadow: 0 8px 20px rgba(36,20,48,.14); }
.wmenu__list button { width: 100%; text-align: left; background: none; border: none; padding: 6px 8px; border-radius: 6px; font: inherit; cursor: pointer; color: #241430; }
.wmenu__list button:hover, .wmenu__list button:focus-visible { background: #24143012; outline: none; }
.wmenu__danger { color: #b3261e; }
</style>

tailwind

<details class="wmenu-tw relative font-sans text-[13px] text-[#241430]" style="--c:#241430;" >
  <summary class="inline-flex items-center justify-center border border-[#24143022] rounded-md bg-[#FAF7F2] cursor-pointer list-none" style="width:26px;height:26px;color:var(--c);" aria-label="Revenue widget options">⋯</summary>
  <ul class="absolute z-10 mt-1 p-1.5 list-none border border-[#24143022] rounded-lg bg-[#FAF7F2] min-w-[120px] shadow-lg">
    <li><button type="button" class="w-full text-left bg-transparent border-none px-2 py-1.5 rounded-md hover:bg-black/5">Refresh</button></li>
    <li><button type="button" class="w-full text-left bg-transparent border-none px-2 py-1.5 rounded-md hover:bg-black/5">Export</button></li>
    <li><button type="button" class="w-full text-left bg-transparent border-none px-2 py-1.5 rounded-md text-red-700 hover:bg-black/5">Remove</button></li>
  </ul>
</details>

react

export function WidgetMenu({
  label = "Revenue",
  open = false,
  size = 26,
  color = "#241430",
}) {
  return (
    <details open={open} style={{ position: "relative", font: "13px system-ui, sans-serif", color: "#241430" }}>
      <summary aria-label={label + " widget options"} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: size, height: size, border: "1px solid #24143022", borderRadius: 6, background: "#FAF7F2", cursor: "pointer", listStyle: "none", color }}>⋯</summary>
      <ul style={{ position: "absolute", zIndex: 1, margin: "4px 0 0", padding: 6, listStyle: "none", border: "1px solid #24143022", borderRadius: 8, background: "#FAF7F2", minWidth: 120, boxShadow: "0 8px 20px rgba(36,20,48,.14)" }}>
        <li><button type="button" style={{ width: "100%", textAlign: "left", background: "none", border: "none", padding: "6px 8px", borderRadius: 6, cursor: "pointer", color: "#241430" }}>Refresh</button></li>
        <li><button type="button" style={{ width: "100%", textAlign: "left", background: "none", border: "none", padding: "6px 8px", borderRadius: 6, cursor: "pointer", color: "#241430" }}>Export</button></li>
        <li><button type="button" style={{ width: "100%", textAlign: "left", background: "none", border: "none", padding: "6px 8px", borderRadius: 6, cursor: "pointer", color: "#b3261e" }}>Remove</button></li>
      </ul>
    </details>
  );
}