# Context menu

The menu’s own card, opened where you pointed: by right-click, by a long press on a touch screen, or from the keyboard with Shift F10 or the Menu key. The thing it opened on stays sunk while it is out.

Kit part · With the Kit · https://tactileui.dev/parts/context-menu

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The card and the whole keyboard are the menu’s. A pointer that is not a mouse starts a half-second timer on the target, which sinks into its recess as time passes.

## Variants

- A row · at rest
- The target while its card is out
- A tray, at the pointer
- The card · actions and an option
- The card · a danger line

## States

- Rest
- Hover
- Long press held
- Card out
- Focus

## Props and options

| Name | Kind | Description |
| - | - | - |
| data-menu-context | attribute | On the target. Several targets can share one menu. |
| aria-label | attribute | So the keyboard reaches it. Say “Context menu: Shift F10” in the label. |
| aria-keyshortcuts | attribute | Tells assistive technology a menu is available, and how to reach it. |
| data-context-open | attribute | Present while the target’s card is out. The target stays down. |
| data-pressing | attribute | Present on a touch held towards the long press: the target sinks over the half second. |
| LONG_PRESS_MS · LONG_PRESS_SLOP | constant | How long a touch is held, and how far it may drift, to be a long press. |
| pressDrifted(from, to, slop) | function | Whether a touch has moved too far to still be a press. Pure. |
| Right-click · long press | pointer | Opens at the pointer with focus on the card; a scroll or a lift before half a second cancels the press. |
| Shift F10 · Menu key | keyboard | Opens at the target with the first line focused. Escape or a choice returns focus to the target. |

## Usage notes

Right-click a file, or Tab to it and press Shift F10 (or the Menu key). On a touch screen, press and hold. Right-click the tray for a menu at the pointer.

## Accessibility

- The same actions must be reachable without the gesture: a context menu is a shortcut, never the only door. Put them in a visible key or a toolbar too.
- The target is focusable and its label says how to open the menu.
- Shift F10 and the Menu key open the card at the target with its first line focused. Escape, or choosing a line, puts focus back on the target.
- The long press is for touch only; it is cancelled by a scroll, so it never fights the page, and it does not also fire the target’s click.
- The card is the menu part’s, so it has the same roles, arrow keys, type-ahead and states, and disabled lines stay in place.
- The sunk look while the card is out is a second cue for which target the menu belongs to.

## Related parts

- [Menu](https://tactileui.dev/parts/menu): A card of actions and options that slides out from under its key. The key stays down while the card is out; an option that is on lights its lamp.
- [Popover](https://tactileui.dev/parts/popover): A card hung from the key that opened it, with a printed leader running back to the key. Not modal: the page stays live around it.
- [Command palette](https://tactileui.dev/parts/command): Every action and page behind one key: a modal plate whose entry line is a lit display, with the results printed below and the chosen one pressed in.