Default
report.pdfRight-click, or press Shift+F10, for actions
ContextMenu
Actions for an item, opened by right-click or Shift+F10 and the Menu key on the focused item.
- Pro
- Version 2.0.0-rc.1
- APG pattern: Menu (context)
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Tokens
The 1 design tokens ContextMenu reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 1 tokens
| Token | Value now | CSS variable |
|---|---|---|
| listbox.padding | … | --sd-listbox-padding |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/context-menuThen import it
import { ContextMenu } from "@/components/ui/context-menu"Props
| Prop | Type | What it does |
|---|---|---|
childrenrequired | ReactNode | The element the menu belongs to. It must be focusable and named (a link, a row, or a file tile with tabIndex 0, role="group" and an aria-label). |
menurequired | ReactNode | MenuItem, MenuSection and MenuSeparator elements (from Menu). |
labelrequired | string | Names the menu ("Actions for report.pdf"). |
onAction | (key: Key) => void | Called with the chosen MenuItem's id. |
className | string |
When to use it
Use it for
- Files, cards and canvas objects that also have a visible menu
Use something else for
- The only way to reach an action: always show a Menu too
- Text fields (keep the browser's own menu)
Accessibility
Screen readers announce "Actions for report.pdf, menu" then "Rename, menu item, 1 of 3".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Offer the same actions in a visible Menu
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 40 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 85 text runs: 0 below 7:1, lowest 10.58:1 |
| Target size | 0 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 18 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 4 of 4, Firefox 4 of 4, WebKit 4 of 4 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the item |
| Shift+F10 | Shift+F10 opens the menu on the first item |
| ArrowDown | Down moves to the next item |
| Escape | Esc closes and returns focus to the item |
In Figma
The Figma component is ContextMenu. The Figma library isn’t published yet.
Figma to code: Items → menu; Target → children; nested MenuItem → menu.