Share Menu

Install

Install manually View source on GitHub

Anatomy

ShareMenu
ShareMenuTrigger
ShareMenuContent
ShareMenuNative
ShareMenuCopy
ShareMenuSeparator
ShareMenuChannel

Accessibility3 checks

The trigger is an APG menu button with aria-haspopup, aria-expanded, and Arrow Up or Down to open.
Arrow keys, Home, and End move focus between items; Escape closes and returns focus to the trigger.
Copy results are announced in a polite live region, and the native share item appears only where navigator.share exists.

Content and community

Code example

usage.tsx

"use client";import { AtSign, Mail } from "lucide-react";import {  ShareMenu,  ShareMenuChannel,  ShareMenuContent,  ShareMenuCopy,  ShareMenuNative,  ShareMenuSeparator,  ShareMenuTrigger,  type ShareMenuVariant,} from "@/components/ui/uai/share-menu";const url = "https://uai.dev/blog/retry-budgets";const title = "Retry budgets in practice";export function ShareMenuPreview({ variant = "outlined" }: { variant?: ShareMenuVariant }) {  return (    <ShareMenu variant={variant} url={url} shareTitle={title}>      <ShareMenuTrigger>Share article</ShareMenuTrigger>      <ShareMenuContent>        <ShareMenuNative />        <ShareMenuCopy />        <ShareMenuSeparator />        <ShareMenuChannel          href={`mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(url)}`}        >          <Mail size={14} aria-hidden="true" />          Email        </ShareMenuChannel>        <ShareMenuChannel          href={`https://bsky.app/intent/compose?text=${encodeURIComponent(`${title} ${url}`)}`}        >          <AtSign size={14} aria-hidden="true" />          Bluesky        </ShareMenuChannel>      </ShareMenuContent>    </ShareMenu>  );}

Manual installation

share-menu.tsx

Loading component source…