navigator.share Is Great and You Still Need a Fallback Sheet

On a phone, navigator.share() opens the real OS share sheet — AirDrop, Messages, the user's actual apps. It's the correct share UI and it costs one function call. Then your analytics show desktop Chrome users clicking Share and nothing happening, because desktop support ranges from "partial" to "no", and even where it exists it needs a user gesture and a secure context.

Velocity X's standard-share-sheet-overlay treats the native sheet as an enhancement, not a dependency: one share button, native where it works, a proper fallback overlay where it doesn't.

The Money Pattern

const share = async () => {
  const data = { title: doc.title, url: location.href };

  if (navigator.canShare?.(data)) {
    try {
      await navigator.share(data);
      return;                      // native sheet handled it
    } catch (e) {
      if (e.name === 'AbortError') return;  // user closed it — NOT a failure
    }
  }
  setFallbackOpen(true);           // your sheet: copy link, X, LinkedIn, email
};

Two subtleties carry the pattern. canShare() before share() — feature-detecting navigator.share alone isn't enough, because a browser can have the function and refuse the payload. And AbortError means the user dismissed the native sheet; opening your fallback on top of that dismissal is hostile, not helpful.

The Catch

The fallback's first action is Copy Link, and it's the one people actually use — which makes navigator.clipboard.writeText() your second permissions surface. It also needs a secure context, and it needs visible confirmation ("Copied") because nothing else tells the user it worked.

Resist pre-populating the fallback with fifteen networks. Copy link, X, LinkedIn, email covers the real distribution of shares; every extra icon is choice tax on the common case. (Your audience may differ — that's a prop, not a hardcode.)

The Verdict

Share buttons are progressive enhancement in its purest form: the platform's sheet when the platform offers one, yours when it doesn't, and no dead clicks either way. The assembled version — overlay, focus trap, copy confirmation — lives in Velocity X's Standard Overlays & Menus, source you own.