ShareMenu

Markdown

Copy link, the device share sheet when there is one, and configurable targets.

Use it for: Sharing a page or opening a query in another chat: copy link, native share sheet and chosen targets.
Not for: Copying a single value. Try CopyButton.

LinkedIn X Email

Loading example…

Installation

npm install @stackunseen/ui

import { ShareMenu } from '@stackunseen/ui/navigation';

Styles: @stackunseen/ui/styles.css and @stackunseen/ui/navigation.css

Usage and props

Import this component from @stackunseen/ui/navigation. Load @stackunseen/ui/styles.css first, then @stackunseen/ui/navigation.css.

Native share support is decided on the client only, so server and first client render agree. A dismissed share is not an error. External targets open in a new tab with rel="noopener noreferrer"; no tracking parameters are added. Custom targets must be http(s), mailto or relative links; others are dropped. For "open in another chat", build each href from the query.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

url · title · text? · targets?: (copy | native | linkedin | x | email | { id, label, href })[] · presentation?: inline | menu · label? · onShare?(target)

How state and callbacks work

All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract: url · title · text? · targets?: (copy | native | linkedin | x | email | { id, label, href })[] · presentation?: inline | menu · label? · onShare?(target)
Keeps honest: Native share support is decided on the client only, so server and first client render agree. A dismissed share is not an error. External targets open in a new tab with rel="noopener noreferrer"; no tracking parameters are added. Custom targets must be http(s), mailto or relative links; others are dropped. For "open in another chat", build each href from the query.
MCP: read_component "ShareMenu" on the docs endpoint

Open the Markdown file

Keyboard and customization

Keyboard

Buttons and links in a labeled group, or a menu with arrow keys.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio