Dropdown Menu

Menu revealed from a trigger.

html

<details class="ddmenu ddmenu--left" style="--accent:#241430;" >
  <summary class="ddmenu__trigger">Options <span class="ddmenu__caret" aria-hidden="true">&#9662;</span></summary>
  <nav class="ddmenu__panel" aria-label="Options">
    <a class="ddmenu__item" href="#">Overview</a>
    <a class="ddmenu__item" href="#">Reports</a>
    <a class="ddmenu__item" href="#">Exports</a>
  </nav>
</details>
<style>
.ddmenu { position: relative; width: fit-content; font: 500 14px system-ui, sans-serif; }
.ddmenu__trigger { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; background: #FAF7F2; color: #241430; }
.ddmenu__trigger::-webkit-details-marker { display: none; }
.ddmenu__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ddmenu__caret { color: var(--accent); }
.ddmenu__panel { position: absolute; top: calc(100% + 6px); min-width: 160px; 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; }
.ddmenu--left .ddmenu__panel { left: 0; }
.ddmenu--right .ddmenu__panel { right: 0; }
.ddmenu__item { padding: 8px 10px; border-radius: 8px; text-decoration: none; color: #241430; }
.ddmenu__item:hover, .ddmenu__item:focus-visible { background: #FAF7F2; outline: none; }
</style>

tailwind

<details class="ddmenu-tw ddmenu-tw--left relative w-fit font-medium text-sm" style="--accent:#241430;" >
  <summary class="list-none cursor-pointer inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg bg-[#FAF7F2] text-[#241430]">Options <span aria-hidden="true" style="color:#241430;">&#9662;</span></summary>
  <nav aria-label="Options" class="absolute top-1.5 min-w-[160px] bg-white border border-[#241430]/10 rounded-xl shadow-lg p-1.5 flex flex-col gap-0.5 z-10">
    <a class="px-2.5 py-2 rounded-lg no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">Overview</a>
    <a class="px-2.5 py-2 rounded-lg no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">Reports</a>
    <a class="px-2.5 py-2 rounded-lg no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">Exports</a>
  </nav>
</details>
<style>
.ddmenu-tw summary::-webkit-details-marker { display: none; }
.ddmenu-tw summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ddmenu-tw--left nav { left: 0; }
.ddmenu-tw--right nav { right: 0; }
</style>

react

export function DropdownMenu({
  label = "Options",
  align = "left",
  accent = "#241430",
  open = false,
}) {
  return (
    <details open={open} style={{ position: "relative", width: "fit-content", fontFamily: "system-ui, sans-serif", fontSize: 14, fontWeight: 500 }}>
      <summary style={{ listStyle: "none", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6, padding: "8px 14px", borderRadius: 8, background: "#FAF7F2", color: "#241430" }}>
        {label} <span aria-hidden="true" style={{ color: accent }}>&#9662;</span>
      </summary>
      <nav aria-label={label} style={{ position: "absolute", top: "calc(100% + 6px)", [align]: 0, minWidth: 160, 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 }}>
        <a href="#" style={{ padding: "8px 10px", borderRadius: 8, textDecoration: "none", color: "#241430" }}>Overview</a>
        <a href="#" style={{ padding: "8px 10px", borderRadius: 8, textDecoration: "none", color: "#241430" }}>Reports</a>
        <a href="#" style={{ padding: "8px 10px", borderRadius: 8, textDecoration: "none", color: "#241430" }}>Exports</a>
      </nav>
    </details>
  );
}