Share Menu — Copy Link & Social Share Snippet

A share menu combines the two most common ways people actually share a link — copying the URL directly, and posting to a specific platform — into one compact dropdown, rather than the older pattern of a full row of always-visible social icons cluttering the page. This snippet builds both halves, plus the details that make each one work reliably.

The copy-link field

The URL sits in a read-only <input readonly>, not a plain <span> — using a real input means a user can still manually select and copy the text if the clipboard button fails for any reason, and readonly (rather than disabled) keeps it focusable and selectable while preventing edits. The Copy button calls navigator.clipboard.writeText(), which returns a promise, and on success swaps its own label to "Copied!" with a green background for 1.8 seconds before reverting — direct, in-place feedback rather than a separate toast notification.

The clipboard fallback

navigator.clipboard is only available in secure contexts (HTTPS or localhost) and can be blocked by browser permissions or older browsers entirely. The .catch() handler covers that case by calling input.select(), which highlights the URL text so the user can copy it manually with Ctrl/Cmd+C — a small status message explains what to do next. Skipping this fallback is a common reason "Copy" buttons silently do nothing for a subset of users.

Why the menu, not the whole page, holds the share options

Collapsing every share destination behind one "Share" trigger keeps the primary UI uncluttered, and it scales — adding a fifth or sixth platform to the grid costs one more .social-item button, not another permanently visible icon competing for space in the page header.

Centered dropdown positioning

Unlike a typical dropdown anchored to one edge, this menu centers itself under its trigger with left: 50%; transform: translateX(-50%), which looks more balanced for a compact, icon-led trigger button than a left- or right-anchored panel would.

Brand-colored social icons

Each platform's icon sits in a small rounded square using that platform's actual brand color (#000 for X, #0a66c2 for LinkedIn, #25d366 for WhatsApp) — consistent, recognizable brand colors help users find their preferred platform at a glance inside a 2×2 grid faster than uniformly-colored icons would.

Wiring real share URLs

The demo's shareTo() only logs which platform was clicked; a production version should open each platform's actual share-intent URL in a new tab or popup window. Common patterns: X is https://twitter.com/intent/tweet?url= + encoded URL + &text= + encoded message; LinkedIn is https://www.linkedin.com/sharing/share-offsite/?url= + encoded URL; Email is a plain mailto:?subject=...&body= link (no popup needed); WhatsApp is https://wa.me/?text= + encoded message with the URL included in the text.

Accessibility and dismissal

The trigger carries aria-haspopup="true" and aria-expanded, flipped by toggleMenu(). Two independent listeners close the menu — a document click check using closest('#shareWrap'), and an Escape keydown handler — the same dual dismissal pattern used by every other dropdown-style component in this library.

See also the copy button snippet for the standalone clipboard-copy pattern used here, and the download button for another action button with distinct idle/success feedback states.