Organisation Switcher

Switches organisational context.

html

<details class="orgsw" style="--accent:#A8E6C1;" >
  <summary class="orgsw__trigger" aria-label="Switch organisation">
    <span class="orgsw__mark" style="background:#A8E6C1;" aria-hidden="true"></span>
    <span class="orgsw__id"><span class="orgsw__name">Northwind Studio</span><span class="orgsw__plan">Pro plan</span></span>
    <span class="orgsw__chevron" aria-hidden="true">&#9662;</span>
  </summary>
  <div class="orgsw__panel" role="group" aria-label="Organisations">
    <a class="orgsw__item is-current" href="#" aria-current="true">Northwind Studio</a>
    <a class="orgsw__item" href="#">Southbank Collective</a>
    <button class="orgsw__add" type="button">+ New organisation</button>
  </div>
</details>
<style>
.orgsw { position: relative; width: fit-content; font: 14px/1.4 system-ui, sans-serif; color: #241430; }
.orgsw__trigger { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #FAF7F2; border: 1px solid rgba(36,20,48,.12); border-radius: 10px; cursor: pointer; list-style: none; }
.orgsw__trigger::-webkit-details-marker { display: none; }
.orgsw__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.orgsw__mark { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.orgsw__id { display: flex; flex-direction: column; line-height: 1.25; }
.orgsw__name { font-weight: 600; }
.orgsw__plan { font-size: 12px; opacity: .6; }
.orgsw__chevron { opacity: .5; font-size: 11px; }
.orgsw__panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; 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; }
.orgsw__item { padding: 8px 10px; border-radius: 8px; text-decoration: none; color: #241430; }
.orgsw__item.is-current { font-weight: 600; }
.orgsw__item:hover, .orgsw__item:focus-visible { background: #FAF7F2; outline: none; }
.orgsw__add { text-align: left; padding: 8px 10px; border-radius: 8px; border: none; background: none; font: inherit; color: #241430; opacity: .7; cursor: pointer; }
.orgsw__add:hover, .orgsw__add:focus-visible { background: #FAF7F2; opacity: 1; outline: none; }
</style>

tailwind

<details class="orgsw-tw relative w-fit font-sans text-sm text-[#241430]" style="--accent:#A8E6C1;" >
  <summary class="flex items-center gap-2.5 px-3 py-2 bg-[#FAF7F2] border border-[#241430]/10 rounded-xl cursor-pointer list-none" aria-label="Switch organisation">
    <span class="w-[26px] h-[26px] rounded-lg flex-none" style="background:#A8E6C1;" aria-hidden="true"></span>
    <span class="flex flex-col leading-tight">
      <span class="font-semibold">Northwind Studio</span>
      <span class="text-xs opacity-60">Pro plan</span>
    </span>
    <span class="opacity-50 text-[11px]" aria-hidden="true">&#9662;</span>
  </summary>
  <div class="absolute top-1.5 left-0 min-w-[220px] 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="Organisations">
    <a class="px-2.5 py-2 rounded-lg font-semibold no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#" aria-current="true">Northwind Studio</a>
    <a class="px-2.5 py-2 rounded-lg no-underline text-[#241430] hover:bg-[#FAF7F2]" href="#">Southbank Collective</a>
    <button class="text-left px-2.5 py-2 rounded-lg border-0 bg-transparent font-sans text-[#241430]/70 cursor-pointer hover:bg-[#FAF7F2] hover:text-[#241430]" type="button">+ New organisation</button>
  </div>
</details>
<style>
.orgsw-tw summary::-webkit-details-marker { display: none; }
.orgsw-tw summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

react

export function OrganisationSwitcher({
  orgName = "Northwind Studio",
  plan = "Pro plan",
  accent = "#A8E6C1",
  open = false,
}) {
  return (
    <details open={open} style={{ position: "relative", width: "fit-content", fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <summary aria-label="Switch organisation" style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 12px", background: "#FAF7F2", border: "1px solid rgba(36,20,48,.12)", borderRadius: 10, cursor: "pointer", listStyle: "none" }}>
        <span aria-hidden="true" style={{ width: 26, height: 26, borderRadius: 7, background: accent, flex: "none" }} />
        <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.25 }}>
          <span style={{ fontWeight: 600 }}>{orgName}</span>
          <span style={{ fontSize: 12, opacity: .6 }}>{plan}</span>
        </span>
        <span aria-hidden="true" style={{ opacity: .5, fontSize: 11 }}>&#9662;</span>
      </summary>
      <div role="group" aria-label="Organisations" style={{ position: "absolute", top: "calc(100% + 6px)", left: 0, minWidth: 220, 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="#" aria-current="true" style={{ padding: "8px 10px", borderRadius: 8, textDecoration: "none", color: "#241430", fontWeight: 600 }}>{orgName}</a>
        <a href="#" style={{ padding: "8px 10px", borderRadius: 8, textDecoration: "none", color: "#241430" }}>Southbank Collective</a>
        <button type="button" style={{ textAlign: "left", padding: "8px 10px", borderRadius: 8, border: "none", background: "none", font: "inherit", color: "#241430", opacity: .7, cursor: "pointer" }}>+ New organisation</button>
      </div>
    </details>
  );
}