Overflow Menu

Secondary actions hidden behind a menu.

html

<details class="overflow overflow--right" style="--accent:#F5C2E0;" >
  <summary class="overflow__trigger" aria-label="More actions">&#8942;</summary>
  <div class="overflow__panel" role="group" aria-label="More actions">
    <button class="overflow__item" type="button">Share</button>
    <button class="overflow__item" type="button">Print</button>
    <button class="overflow__item" type="button">Archive</button>
  </div>
</details>
<style>
.overflow { position: relative; width: fit-content; font: 14px system-ui, sans-serif; }
.overflow__trigger { list-style: none; cursor: pointer; padding: 6px 10px; border-radius: 8px; font-size: 18px; line-height: 1; color: #241430; }
.overflow__trigger::-webkit-details-marker { display: none; }
.overflow__trigger:hover, .overflow__trigger:focus-visible { background: #FAF7F2; outline: 2px solid var(--accent); outline-offset: 1px; }
.overflow__panel { position: absolute; top: calc(100% + 4px); min-width: 150px; background: #fff; border: 1px solid rgba(36,20,48,.12); border-radius: 10px; box-shadow: 0 8px 24px rgba(36,20,48,.14); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 10; }
.overflow--left .overflow__panel { left: 0; }
.overflow--right .overflow__panel { right: 0; }
.overflow__item { text-align: left; padding: 8px 10px; border-radius: 8px; border: none; background: none; font: inherit; color: #241430; cursor: pointer; }
.overflow__item:hover, .overflow__item:focus-visible { background: #FAF7F2; outline: none; }
</style>

tailwind

<details class="overflow-tw overflow-tw--right relative w-fit font-sans text-sm" style="--accent:#F5C2E0;" >
  <summary class="list-none cursor-pointer px-2.5 py-1.5 rounded-lg text-lg leading-none text-[#241430] hover:bg-[#FAF7F2]" aria-label="More actions">&#8942;</summary>
  <div class="absolute top-1 min-w-[150px] bg-white border border-[#241430]/10 rounded-xl shadow-lg p-1.5 flex flex-col gap-0.5 z-10" role="group" aria-label="More actions">
    <button class="text-left px-2.5 py-2 rounded-lg border-0 bg-transparent font-sans text-[#241430] cursor-pointer hover:bg-[#FAF7F2]" type="button">Share</button>
    <button class="text-left px-2.5 py-2 rounded-lg border-0 bg-transparent font-sans text-[#241430] cursor-pointer hover:bg-[#FAF7F2]" type="button">Print</button>
    <button class="text-left px-2.5 py-2 rounded-lg border-0 bg-transparent font-sans text-[#241430] cursor-pointer hover:bg-[#FAF7F2]" type="button">Archive</button>
  </div>
</details>
<style>
.overflow-tw summary::-webkit-details-marker { display: none; }
.overflow-tw summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.overflow-tw--left > div { left: 0; }
.overflow-tw--right > div { right: 0; }
</style>

react

export function OverflowMenu({
  label = "More actions",
  accent = "#F5C2E0",
  open = false,
  align = "right",
}) {
  return (
    <details open={open} style={{ position: "relative", width: "fit-content", fontFamily: "system-ui, sans-serif", fontSize: 14 }}>
      <summary aria-label={label} style={{ listStyle: "none", cursor: "pointer", padding: "6px 10px", borderRadius: 8, fontSize: 18, lineHeight: 1, color: "#241430" }}>&#8942;</summary>
      <div role="group" aria-label={label} style={{ position: "absolute", top: "calc(100% + 4px)", [align]: 0, minWidth: 150, background: "#fff", border: "1px solid rgba(36,20,48,.12)", borderRadius: 10, boxShadow: "0 8px 24px rgba(36,20,48,.14)", padding: 6, display: "flex", flexDirection: "column", gap: 2 }}>
        <button type="button" style={{ textAlign: "left", padding: "8px 10px", borderRadius: 8, border: "none", background: "none", font: "inherit", color: "#241430", cursor: "pointer" }}>Share</button>
        <button type="button" style={{ textAlign: "left", padding: "8px 10px", borderRadius: 8, border: "none", background: "none", font: "inherit", color: "#241430", cursor: "pointer" }}>Print</button>
        <button type="button" style={{ textAlign: "left", padding: "8px 10px", borderRadius: 8, border: "none", background: "none", font: "inherit", color: "#241430", cursor: "pointer" }}>Archive</button>
      </div>
    </details>
  );
}