Organisation Switcher Block

Usage

This block provides a framework-free organisation switcher pattern. It uses native <details> and <summary> so the menu opens without JavaScript while keeping the markup copyable for docs shells, app sidebars, and workspace headers.
Organisation switcher preview
Resize the frame to check the compact header dropdown treatment.
Width768px
Acme Inc.Enterprise
<section class="rounded-xl border bg-card text-card-foreground shadow-xs" data-resizable-preview>
  <header class="flex flex-wrap items-center gap-3 border-b px-4 py-3">
    <div class="min-w-0">
      <p class="text-sm font-medium">Organisation switcher preview</p>
      <p class="text-xs text-muted-foreground">Resize the frame to check the compact header dropdown treatment.</p>
    </div>
    <div class="ms-auto flex flex-wrap items-center gap-2">
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="375">Mobile</button>
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="768">Tablet</button>
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="1120">Desktop</button>
      <button type="button" class="btn" data-variant="ghost" data-size="sm" data-preview-preset="1280">Full</button>
    </div>
  </header>
  <div class="flex flex-wrap items-center gap-3 border-b px-4 py-3">
    <label class="text-xs font-medium text-muted-foreground" for="organisation-switcher-range">Width</label>
    <input id="organisation-switcher-range" class="w-full min-w-40 flex-1 accent-primary" type="range" min="360" max="1280" value="768" data-preview-range />
    <output class="rounded-md bg-muted px-2.5 py-1 font-mono text-xs tabular-nums" data-preview-output>768px</output>
  </div>
  <div class="overflow-x-auto bg-muted/30 p-4 md:p-6">
    <div class="mx-auto w-full max-w-full overflow-hidden rounded-xl border bg-background shadow-sm transition-[width] duration-150" data-preview-viewport>
      <div class="flex min-h-[30rem] items-start justify-center p-4 pt-16 pb-28 md:p-8 md:pt-20 md:pb-32">
<details class="group relative w-full max-w-80" open>
  <summary class="btn h-auto w-full list-none justify-start gap-3 p-2 text-left shadow-sm [&::-webkit-details-marker]:hidden" data-variant="outline" aria-label="Choose organisation">
    <span class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
      <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
    </span>
    <span class="grid min-w-0 flex-1">
      <span class="truncate text-sm font-semibold">Acme Inc.</span>
      <span class="truncate text-xs text-muted-foreground">Enterprise</span>
    </span>
    <svg class="ms-auto size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
  </summary>
  <div class="absolute start-0 top-full z-20 mt-2 w-full min-w-64 rounded-xl border bg-popover p-1 text-popover-foreground shadow-lg" role="menu" aria-label="Organisations">
    <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">Organisations</div>
    <button type="button" class="flex w-full items-center gap-2 rounded-md p-2 text-left text-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50" role="menuitem">
      <span class="flex size-7 shrink-0 items-center justify-center rounded-md border bg-background">
        <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
      </span>
      <span class="min-w-0 flex-1 truncate">Acme Inc.</span>
      <span class="text-xs text-muted-foreground">Cmd 1</span>
    </button>
    <button type="button" class="flex w-full items-center gap-2 rounded-md p-2 text-left text-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50" role="menuitem">
      <span class="flex size-7 shrink-0 items-center justify-center rounded-md border bg-background">
        <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18"/><path d="M6 12H4a2 2 0 0 0-2 2v8"/><path d="M18 9h2a2 2 0 0 1 2 2v11"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
      </span>
      <span class="min-w-0 flex-1 truncate">Beste Studio</span>
      <span class="text-xs text-muted-foreground">Cmd 2</span>
    </button>
    <button type="button" class="flex w-full items-center gap-2 rounded-md p-2 text-left text-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50" role="menuitem">
      <span class="flex size-7 shrink-0 items-center justify-center rounded-md border bg-background">
        <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
      </span>
      <span class="min-w-0 flex-1 truncate">Personal Workspace</span>
      <span class="text-xs text-muted-foreground">Cmd 3</span>
    </button>
    <hr class="separator my-1" aria-hidden="true" />
    <button type="button" class="flex w-full items-center gap-2 rounded-md p-2 text-left text-sm font-medium text-muted-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50" role="menuitem">
      <span class="flex size-7 shrink-0 items-center justify-center rounded-md border bg-background">
        <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
      </span>
      <span>Add organisation</span>
    </button>
  </div>
</details>
      </div>
    </div>
  </div>
</section>
Notes

This 5h3ll-ui version keeps the public block intentionally small: native disclosure for the menu shell, regular buttons for selectable rows, and app-owned JavaScript only if a product needs to persist the active workspace.