# Share Menu

> Native sharing, copy-link feedback, and share channels in a floating menu.

- Category: Content
- Kind: component
- Page: https://uaiblocks.dev/components/share-menu
- Registry item: https://uaiblocks.dev/r/share-menu.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/share-menu.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/share-menu.json
```

## 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>
  );
}
```

## Anatomy

- `ShareMenu`
  - `ShareMenuTrigger`
  - `ShareMenuContent`
    - `ShareMenuNative`
    - `ShareMenuCopy`
    - `ShareMenuSeparator`
    - `ShareMenuChannel`

## Accessibility

- 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.