Menus And Actions
Activity Views
A share/export chooser presented as a sheet — the Action Sheet transition hosting a destination list instead of a command list.
Findings
What's actually in /ig
- The full-height sheet mechanism for this pattern is confirmed: ._a96f translates from translateY(100%) to 0 over Ease Settle, as documented on Action Sheets.
Rationale
Why this component exists
Sharing is a destination choice, not a command, so it inherits the Lockup anatomy (icon + label) inside the Action Sheet's row list rather than the plain text rows a command menu uses — each destination needs a recognizable icon to scan quickly.
Usage
When to use it
Use when
Presenting a list of external or in-app destinations to send content to.
Avoid when
The choices are commands rather than destinations (use Action Sheets' plain row list) or there are more than ~6 destinations (promote the most recent/relevant ones and collapse the rest behind a 'More' row).
Anatomy
Anatomy
- 01
Sheet surface
- 02
Destination row (icon + label, Lockup anatomy)
- 03
Recent destinations first
- 04
Dismiss
Specification
Spacing, colour, type, and motion
- Surface
- Same as Action Sheets — fixed, full-height, translateY(100%) → 0
- Row height
- 50px, matching the documented search-result row
- Icon well
- Fixed-size leading well, matching Lockups
- Motion
- Ease Settle, ~500ms — see Motion
States
States
| State | Behaviour |
|---|---|
| Hidden | Sheet not yet triggered. Trigger is typically an icon-only Share button or a contextual action row. |
| Appearing | Sheet translates from translateY(100%) to 0 over ~500ms Ease Settle — identical motion to Action Sheets. |
| Visible | Full surface showing destination rows in Lockup layout (icon + label), ordered by recency. |
| Row pressed | Destination row highlights with the hover-overlay token on tap or click. |
| Dismissing | Sheet translates back to translateY(100%) on dismiss or destination selection. |
Examples
Real interface compositions
Share flow
Share reel destination sheet
Recent DM recipients, Add to story, Copy link, and Share to external apps appear as lockup rows inside the same slide-up sheet used by action choices.
Action Sheet surface, 50px lockup rows, recent-first ordering, Ease Settle
Guidance
Usage guidance
- Order destinations by recency, not alphabetically — that's consistent with how Instagram treats the search/result list as recency-led elsewhere in the system.
- Reuse the Action Sheet surface verbatim; the only difference is row content, not the container.
Do / Don't
Do / Don't
Do
- Order destinations by recency — the evidenced system ranks recent contacts and apps first.
- Collapse rarely-used destinations behind a 'More' row when the count exceeds six.
Don’t
- Use text-only rows — destinations need icons (Lockup anatomy) to scan quickly at share-sheet speed.
- Build a custom surface — reuse the Action Sheet container unchanged; only the row content differs.
See also