Radix2Solid

Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

Context Menu

Displays a menu located at the pointer, triggered by a right click or a long press.

Download runnable sandbox
import { createSignal } from "solid-js";

import { ContextMenu } from "@radix-solid/primitives";

import { DotFilledIcon, CheckIcon, ChevronRightIcon } from "@radix-solid/icons";

import styles from "./styles.module.css";

const ContextMenuDemo = () => {

  const [bookmarksChecked, setBookmarksChecked] = createSignal(true);

  const [urlsChecked, setUrlsChecked] = createSignal(false);

  const [person, setPerson] = createSignal("pedro");

  return <ContextMenu.Root>

			<ContextMenu.Trigger class={styles.Trigger}>

				Right-click here.

			</ContextMenu.Trigger>

			<ContextMenu.Portal>

				<ContextMenu.Content class={styles.Content} sideOffset={5} align="end">

					<ContextMenu.Item class={styles.Item}>

						Back <div class={styles.RightSlot}>⌘+[</div>

					</ContextMenu.Item>

					<ContextMenu.Item class={styles.Item} disabled>

						Forward <div class={styles.RightSlot}>⌘+]</div>

					</ContextMenu.Item>

					<ContextMenu.Item class={styles.Item}>

						Reload <div class={styles.RightSlot}>⌘+R</div>

					</ContextMenu.Item>

					<ContextMenu.Sub>

						<ContextMenu.SubTrigger class={styles.SubTrigger}>

							More Tools

							<div class={styles.RightSlot}>

								<ChevronRightIcon />

							</div>

						</ContextMenu.SubTrigger>

						<ContextMenu.Portal>

							<ContextMenu.SubContent class={styles.SubContent} sideOffset={2} alignOffset={-5}>

								<ContextMenu.Item class={styles.Item}>

									Save Page As… <div class={styles.RightSlot}>⌘+S</div>

								</ContextMenu.Item>

								<ContextMenu.Item class={styles.Item}>

									Create Shortcut…

								</ContextMenu.Item>

								<ContextMenu.Item class={styles.Item}>

									Name Window…

								</ContextMenu.Item>

								<ContextMenu.Separator class={styles.Separator} />

								<ContextMenu.Item class={styles.Item}>

									Developer Tools

								</ContextMenu.Item>

							</ContextMenu.SubContent>

						</ContextMenu.Portal>

					</ContextMenu.Sub>



					<ContextMenu.Separator class={styles.Separator} />



					<ContextMenu.CheckboxItem class={styles.CheckboxItem} checked={bookmarksChecked()} onCheckedChange={setBookmarksChecked}>

						<ContextMenu.ItemIndicator class={styles.ItemIndicator}>

							<CheckIcon />

						</ContextMenu.ItemIndicator>

						Show Bookmarks <div class={styles.RightSlot}>⌘+B</div>

					</ContextMenu.CheckboxItem>

					<ContextMenu.CheckboxItem class={styles.CheckboxItem} checked={urlsChecked()} onCheckedChange={setUrlsChecked}>

						<ContextMenu.ItemIndicator class={styles.ItemIndicator}>

							<CheckIcon />

						</ContextMenu.ItemIndicator>

						Show Full URLs

					</ContextMenu.CheckboxItem>



					<ContextMenu.Separator class={styles.Separator} />



					<ContextMenu.Label class={styles.Label}>People</ContextMenu.Label>

					<ContextMenu.RadioGroup value={person()} onValueChange={setPerson}>

						<ContextMenu.RadioItem class={styles.RadioItem} value="pedro">

							<ContextMenu.ItemIndicator class={styles.ItemIndicator}>

								<DotFilledIcon />

							</ContextMenu.ItemIndicator>

							Pedro Duarte

						</ContextMenu.RadioItem>

						<ContextMenu.RadioItem class={styles.RadioItem} value="colm">

							<ContextMenu.ItemIndicator class={styles.ItemIndicator}>

								<DotFilledIcon />

							</ContextMenu.ItemIndicator>

							Colm Tuite

						</ContextMenu.RadioItem>

					</ContextMenu.RadioGroup>

				</ContextMenu.Content>

			</ContextMenu.Portal>

		</ContextMenu.Root>;

};

export default ContextMenuDemo;

Features

  • Supports submenus with configurable reading direction.

  • Supports items, labels, groups of items.

  • Supports checkable items (single or multiple) with optional indeterminate state.

  • Supports modal and non-modal modes.

  • Customize side, alignment, offsets, collision handling.

  • Focus is fully managed.

  • Full keyboard navigation.

  • Typeahead support.

  • Dismissing and layering behavior is highly customizable.

  • Triggers with a long press on touch devices

Anatomy

Import all parts and piece them together.

import { ContextMenu } from "@radix-solid/primitives";

export default () => <ContextMenu.Root>

		<ContextMenu.Trigger />



		<ContextMenu.Portal>

			<ContextMenu.Content>

				<ContextMenu.Label />

				<ContextMenu.Item />



				<ContextMenu.Group>

					<ContextMenu.Item />

				</ContextMenu.Group>



				<ContextMenu.CheckboxItem>

					<ContextMenu.ItemIndicator />

				</ContextMenu.CheckboxItem>



				<ContextMenu.RadioGroup>

					<ContextMenu.RadioItem value="item">

						<ContextMenu.ItemIndicator />

					</ContextMenu.RadioItem>

				</ContextMenu.RadioGroup>



				<ContextMenu.Sub>

					<ContextMenu.SubTrigger />

					<ContextMenu.Portal>

						<ContextMenu.SubContent />

					</ContextMenu.Portal>

				</ContextMenu.Sub>



				<ContextMenu.Separator />

			</ContextMenu.Content>

		</ContextMenu.Portal>

	</ContextMenu.Root>;

API Reference

Adheres to the Menu WAI-ARIA design pattern and uses roving tabindex to manage focus movement among menu items.

Root

Contains all the parts of a context menu.

PropTypeDefault
direnum—
openboolean—
onOpenChangefunction—
modalbooleantrue

Trigger

The area that opens the context menu. Wrap it around the target you want the context menu to open from when right-clicking (or using the relevant keyboard shortcuts).

PropTypeDefault
asChildbooleanfalse
disabledbooleanfalse
Data attributeValues
[data-state]"open" | "closed"

Portal

When used, portals the content part into the body.

PropTypeDefault
forceMountboolean—
containerHTMLElementdocument.body

Content

The component that pops out in an open context menu.

PropTypeDefault
asChildbooleanfalse
loopbooleanfalse
onCloseAutoFocusfunction—
onEscapeKeyDownfunction—
onPointerDownOutsidefunction—
onFocusOutsidefunction—
onInteractOutsidefunction—
forceMountboolean—
alignOffsetnumber0
avoidCollisionsbooleantrue
collisionBoundaryBoundary[]
collisionPaddingnumber | Padding0
stickyenum"partial"
hideWhenDetachedbooleanfalse
Data attributeValues
[data-state]"open" | "closed"
[data-side]"left" | "right" | "bottom" | "top"
[data-align]"start" | "end" | "center"
CSS VariableDescription
--radix-context-menu-content-transform-originThe transform-origin computed from the content and arrow positions/offsets
--radix-context-menu-content-available-widthThe remaining width between the trigger and the boundary edge
--radix-context-menu-content-available-heightThe remaining height between the trigger and the boundary edge
--radix-context-menu-trigger-widthThe width of the trigger
--radix-context-menu-trigger-heightThe height of the trigger

Arrow

An optional arrow element to render alongside a submenu. This can be used to help visually link the trigger item with the ContextMenu.Content. Must be rendered inside ContextMenu.Content.

PropTypeDefault
asChildbooleanfalse
widthnumber10
heightnumber5

Item

The component that contains the context menu items.

PropTypeDefault
asChildbooleanfalse
disabledboolean—
onSelectfunction—
textValuestring—
Data attributeValues
[data-highlighted]

Present when highlighted

[data-disabled]

Present when disabled

Group

Used to group multiple ContextMenu.Items.

PropTypeDefault
asChildbooleanfalse

Label

Used to render a label. It won't be focusable using arrow keys.

PropTypeDefault
asChildbooleanfalse

CheckboxItem

An item that can be controlled and rendered like a checkbox.

PropTypeDefault
asChildbooleanfalse
checkedboolean | 'indeterminate'—
onCheckedChangefunction—
disabledboolean—
onSelectfunction—
textValuestring—
Data attributeValues
[data-state]"checked" | "unchecked" | "indeterminate"
[data-highlighted]

Present when highlighted

[data-disabled]

Present when disabled

RadioGroup

Used to group multiple ContextMenu.RadioItems.

PropTypeDefault
asChildbooleanfalse
valuestring—
onValueChangefunction—

RadioItem

An item that can be controlled and rendered like a radio.

PropTypeDefault
asChildbooleanfalse
value*string—
disabledboolean—
onSelectfunction—
textValuestring—
Data attributeValues
[data-state]"checked" | "unchecked" | "indeterminate"
[data-highlighted]

Present when highlighted

[data-disabled]

Present when disabled

ItemIndicator

Renders when the parent ContextMenu.CheckboxItem or ContextMenu.RadioItem is checked. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

PropTypeDefault
asChildbooleanfalse
forceMountboolean—
Data attributeValues
[data-state]"checked" | "unchecked" | "indeterminate"

Separator

Used to visually separate items in the context menu.

PropTypeDefault
asChildbooleanfalse

Sub

Contains all the parts of a submenu.

PropTypeDefault
defaultOpenboolean—
openboolean—
onOpenChangefunction—

SubTrigger

An item that opens a submenu. Must be rendered inside ContextMenu.Sub.

PropTypeDefault
asChildbooleanfalse
disabledboolean—
textValuestring—
Data attributeValues
[data-state]"open" | "closed"
[data-highlighted]

Present when highlighted

[data-disabled]

Present when disabled

SubContent

The component that pops out when a submenu is open. Must be rendered inside ContextMenu.Sub.

PropTypeDefault
asChildbooleanfalse
loopbooleanfalse
onEscapeKeyDownfunction—
onPointerDownOutsidefunction—
onFocusOutsidefunction—
onInteractOutsidefunction—
forceMountboolean—
sideOffsetnumber0
alignenum"start"
alignOffsetnumber0
avoidCollisionsbooleantrue
collisionBoundaryBoundary[]
collisionPaddingnumber | Padding0
arrowPaddingnumber0
stickyenum"partial"
hideWhenDetachedbooleanfalse
Data attributeValues
[data-state]"open" | "closed"
[data-side]"left" | "right" | "bottom" | "top"
[data-align]"start" | "end" | "center"
CSS VariableDescription
--radix-context-menu-content-transform-originThe transform-origin computed from the content and arrow positions/offsets
--radix-context-menu-content-available-widthThe remaining width between the trigger and the boundary edge
--radix-context-menu-content-available-heightThe remaining height between the trigger and the boundary edge
--radix-context-menu-trigger-widthThe width of the trigger
--radix-context-menu-trigger-heightThe height of the trigger

Examples

With submenus

You can create submenus by using ContextMenu.Sub in combination with its parts.

<ContextMenu.Root>

	<ContextMenu.Trigger>…</ContextMenu.Trigger>

	<ContextMenu.Portal>

		<ContextMenu.Content>

			<ContextMenu.Item>…</ContextMenu.Item>

			<ContextMenu.Item>…</ContextMenu.Item>

			<ContextMenu.Separator />

			<ContextMenu.Sub>

				<ContextMenu.SubTrigger>Sub menu →</ContextMenu.SubTrigger>

				<ContextMenu.Portal>

					<ContextMenu.SubContent>

						<ContextMenu.Item>Sub menu item</ContextMenu.Item>

						<ContextMenu.Item>Sub menu item</ContextMenu.Item>

						<ContextMenu.Arrow />

					</ContextMenu.SubContent>

				</ContextMenu.Portal>

			</ContextMenu.Sub>

			<ContextMenu.Separator />

			<ContextMenu.Item>…</ContextMenu.Item>

		</ContextMenu.Content>

	</ContextMenu.Portal>

</ContextMenu.Root>

With disabled items

You can add special styles to disabled items via the data-disabled attribute.

// index.tsx

import { ContextMenu } from "@radix-solid/primitives";

import "./styles.css";

export default () => <ContextMenu.Root>

		<ContextMenu.Trigger>…</ContextMenu.Trigger>

		<ContextMenu.Portal>

			<ContextMenu.Content>

				<ContextMenu.Item class="ContextMenuItem" disabled>

					…

				</ContextMenu.Item>

				<ContextMenu.Item class="ContextMenuItem">…</ContextMenu.Item>

			</ContextMenu.Content>

		</ContextMenu.Portal>

	</ContextMenu.Root>;
/* styles.css */

.ContextMenuItem[data-disabled] {

	color: gainsboro;

}

With separators

Use the Separator part to add a separator between items.

<ContextMenu.Root>

	<ContextMenu.Trigger>…</ContextMenu.Trigger>

	<ContextMenu.Portal>

		<ContextMenu.Content>

			<ContextMenu.Item>…</ContextMenu.Item>

			<ContextMenu.Separator />

			<ContextMenu.Item>…</ContextMenu.Item>

			<ContextMenu.Separator />

			<ContextMenu.Item>…</ContextMenu.Item>

		</ContextMenu.Content>

	</ContextMenu.Portal>

</ContextMenu.Root>

With labels

Use the Label part to help label a section.

<ContextMenu.Root>

	<ContextMenu.Trigger>…</ContextMenu.Trigger>

	<ContextMenu.Portal>

		<ContextMenu.Content>

			<ContextMenu.Label>Label</ContextMenu.Label>

			<ContextMenu.Item>…</ContextMenu.Item>

			<ContextMenu.Item>…</ContextMenu.Item>

			<ContextMenu.Item>…</ContextMenu.Item>

		</ContextMenu.Content>

	</ContextMenu.Portal>

</ContextMenu.Root>

With checkbox items

Use the CheckboxItem part to add an item that can be checked.

import { createSignal } from "solid-js";

import { CheckIcon } from "@radix-solid/icons";

import { ContextMenu } from "@radix-solid/primitives";

export default () => {

  const [checked, setChecked] = createSignal(true);

  return <ContextMenu.Root>

			<ContextMenu.Trigger>…</ContextMenu.Trigger>

			<ContextMenu.Portal>

				<ContextMenu.Content>

					<ContextMenu.Item>…</ContextMenu.Item>

					<ContextMenu.Item>…</ContextMenu.Item>

					<ContextMenu.Separator />

					<ContextMenu.CheckboxItem checked={checked()} onCheckedChange={setChecked}>

						<ContextMenu.ItemIndicator>

							<CheckIcon />

						</ContextMenu.ItemIndicator>

						Checkbox item

					</ContextMenu.CheckboxItem>

				</ContextMenu.Content>

			</ContextMenu.Portal>

		</ContextMenu.Root>;

};

With radio items

Use the RadioGroup and RadioItem parts to add an item that can be checked amongst others.

import { createSignal } from "solid-js";

import { CheckIcon } from "@radix-solid/icons";

import { ContextMenu } from "@radix-solid/primitives";

export default () => {

  const [color, setColor] = createSignal("blue");

  return <ContextMenu.Root>

			<ContextMenu.Trigger>…</ContextMenu.Trigger>

			<ContextMenu.Portal>

				<ContextMenu.Content>

					<ContextMenu.RadioGroup value={color()} onValueChange={setColor}>

						<ContextMenu.RadioItem value="red">

							<ContextMenu.ItemIndicator>

								<CheckIcon />

							</ContextMenu.ItemIndicator>

							Red

						</ContextMenu.RadioItem>

						<ContextMenu.RadioItem value="blue">

							<ContextMenu.ItemIndicator>

								<CheckIcon />

							</ContextMenu.ItemIndicator>

							Blue

						</ContextMenu.RadioItem>

						<ContextMenu.RadioItem value="green">

							<ContextMenu.ItemIndicator>

								<CheckIcon />

							</ContextMenu.ItemIndicator>

							Green

						</ContextMenu.RadioItem>

					</ContextMenu.RadioGroup>

				</ContextMenu.Content>

			</ContextMenu.Portal>

		</ContextMenu.Root>;

};

With complex items

You can add extra decorative elements in the Item parts, such as images.

import { ContextMenu } from "@radix-solid/primitives";

export default () => <ContextMenu.Root>

		<ContextMenu.Trigger>…</ContextMenu.Trigger>

		<ContextMenu.Portal>

			<ContextMenu.Content>

				<ContextMenu.Item>

					<img src="…" />

					Adolfo Hess

				</ContextMenu.Item>

				<ContextMenu.Item>

					<img src="…" />

					Miyah Myles

				</ContextMenu.Item>

			</ContextMenu.Content>

		</ContextMenu.Portal>

	</ContextMenu.Root>;

Constrain the content/sub-content size

You may want to constrain the width of the content (or sub-content) so that it matches the trigger (or sub-trigger) width. You may also want to constrain its height to not exceed the viewport.

We expose several CSS custom properties such as --radix-context-menu-trigger-width and --radix-context-menu-content-available-height to support this. Use them to constrain the content dimensions.

// index.tsx

import { ContextMenu } from "@radix-solid/primitives";

import "./styles.css";

export default () => <ContextMenu.Root>

		<ContextMenu.Trigger>…</ContextMenu.Trigger>

		<ContextMenu.Portal>

			<ContextMenu.Content class="ContextMenuContent">

				…

			</ContextMenu.Content>

		</ContextMenu.Portal>

	</ContextMenu.Root>;
/* styles.css */

.ContextMenuContent {

	width: var(--radix-context-menu-trigger-width);

	max-height: var(--radix-context-menu-content-available-height);

}

Origin-aware animations

We expose a CSS custom property --radix-context-menu-content-transform-origin. Use it to animate the content from its computed origin based on side, sideOffset, align, alignOffset and any collisions.

// index.tsx

import { ContextMenu } from "@radix-solid/primitives";

import "./styles.css";

export default () => <ContextMenu.Root>

		<ContextMenu.Trigger>…</ContextMenu.Trigger>

		<ContextMenu.Portal>

			<ContextMenu.Content class="ContextMenuContent">

				…

			</ContextMenu.Content>

		</ContextMenu.Portal>

	</ContextMenu.Root>;
/* styles.css */

.ContextMenuContent {

	transform-origin: var(--radix-context-menu-content-transform-origin);

	animation: scaleIn 0.5s ease-out;

}



@keyframes scaleIn {

	from {

		opacity: 0;

		transform: scale(0);

	}

	to {

		opacity: 1;

		transform: scale(1);

	}

}

Collision-aware animations

We expose data-side and data-align attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

// index.tsx

import { ContextMenu } from "@radix-solid/primitives";

import "./styles.css";

export default () => <ContextMenu.Root>

		<ContextMenu.Trigger>…</ContextMenu.Trigger>

		<ContextMenu.Portal>

			<ContextMenu.Content class="ContextMenuContent">

				…

			</ContextMenu.Content>

		</ContextMenu.Portal>

	</ContextMenu.Root>;
/* styles.css */

.ContextMenuContent {

	animation-duration: 0.6s;

	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

}

.ContextMenuContent[data-side="top"] {

	animation-name: slideUp;

}

.ContextMenuContent[data-side="bottom"] {

	animation-name: slideDown;

}



@keyframes slideUp {

	from {

		opacity: 0;

		transform: translateY(10px);

	}

	to {

		opacity: 1;

		transform: translateY(0);

	}

}



@keyframes slideDown {

	from {

		opacity: 0;

		transform: translateY(-10px);

	}

	to {

		opacity: 1;

		transform: translateY(0);

	}

}

Accessibility

Uses roving tabindex to manage focus movement among menu items.

Keyboard Interactions

KeyDescription
Space
Activates the focused item.
Enter
Activates the focused item.
ArrowDown
Moves focus to the next item.
ArrowUp
Moves focus to the previous item.
ArrowRightArrowLeft
When focus is on ContextMenu.SubTrigger, opens or closes the submenu depending on reading direction.
Esc
Closes the context menu