ShareMenu
A Share button opening intent links for Bluesky, Mastodon, Threads, LinkedIn and X, plus copy link and the system share sheet
Category: overlay · WCAG 2.2-AA · share, social, bluesky, mastodon, threads, linkedin, popover, link
Sizes
- sm
- md
States
- closed
- open
- copied
Props
| Prop | Type | Default | Description |
|---|---|---|---|
url | string | — | The page being shared |
text | string | — | Text to post alongside the link (LinkedIn takes none; it reads the page) |
items | Array<'bluesky' | 'mastodon' | 'threads' | 'linkedin' | 'x'> | ['bluesky', 'mastodon', 'threads', 'linkedin', 'x'] | The networks offered, in order |
size | 'sm' | 'md' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
labels | { share?: string; copyLink?: string; copied?: string; more?: string; server?: string; shareOn?: (network: string) => string } | — | Overrides the built-in i18n labels per instance |
className | string | — | Class added to the root element |
Design tokens
--cascivo-color-bg-subtle--cascivo-color-border--cascivo-color-success--cascivo-color-surface--cascivo-color-surface-overlay--cascivo-color-text--cascivo-color-text-muted--cascivo-control-height-md--cascivo-control-height-sm--cascivo-focus-ring--cascivo-font-medium--cascivo-font-sans--cascivo-motion-enter--cascivo-radius-control--cascivo-radius-item--cascivo-radius-overlay--cascivo-shadow-overlay--cascivo-space-1--cascivo-space-2--cascivo-space-3--cascivo-space-4--cascivo-target-min-coarse--cascivo-text-sm--cascivo-text-xs
When to use
- Letting readers share a page to a social network without any account, token or API on your side
- Article, release-note and product pages where sharing is a secondary action
When not to use
- Posting on the user’s behalf from your app — connect their account and use the publishers in @cascivo/app/social
- Copying a single value — use CopyButton
How to build an accessible ShareMenu in React →
Examples
Default
<ShareMenu url="https://cascivo.com/blog/launch" text="cascivo 1.0 is out" />Chosen networks
Offer only the networks your readers use, in your order
<ShareMenu url={url} items={['bluesky', 'mastodon']} size="sm" />Just the link
shareIntentUrl builds the same compose link for your own markup; it returns null for Mastodon without a server
import { shareIntentUrl } from './share-menu'
<a href={shareIntentUrl('bluesky', { url, text }) ?? undefined}>Post to Bluesky</a>Related components
- CopyButton — Use when copying the link is the only sharing you need
- MenuButton — Use for a list of in-app actions rather than outbound links