Strongtie Design System
Getting StartedComponents

Command Palette

Search for a command to run...

Getting Started
  • Introduction
  • Setup Guide
  • Package Installation
  • Code Quality Setup
  • Migration Guide
  • Resources
Registry
  • Getting Started
  • Combobox
  • Datepicker
  • MultiSelect
  • Tree
Guides
  • Framework Recommendations
Foundations
  • States
  • Variables
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Command
  • Combobox
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Item
  • Kbd
  • Label
  • Menubar
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toaster
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
2026 Simpson Strong-Tie
  1. Docs
  3. Components
  5. Context Menu

Context Menu

PreviousNext

A menu component that appears when users right-click or long-press on an element.

Context menus provide quick access to contextual actions and commands related to a specific element or area. They appear at the cursor position and offer relevant options based on what was clicked, making them ideal for power users and complex interfaces.

Example

Right click here
"use client"

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@strongtie/design-system/context-menu"

export function ContextMenuDefault() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-64">
        <ContextMenuItem>
          Back
          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem disabled>
          Forward
          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Reload
          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          Save Page As...
          <ContextMenuShortcut>⌘S</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>Print...</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

Installation

npm install @strongtie/design-system
import { ContextMenu } from "@strongtie/design-system/context-menu"

Components

This module exports the following components:

  • ContextMenu
  • ContextMenuCheckboxItem
  • ContextMenuContent
  • ContextMenuGroup
  • ContextMenuItem
  • ContextMenuLabel
  • ContextMenuPortal
  • ContextMenuRadioGroup
  • ContextMenuRadioItem
  • ContextMenuSeparator
  • ContextMenuShortcut
  • ContextMenuSub
  • ContextMenuSubContent
  • ContextMenuSubTrigger
  • ContextMenuTrigger

Props

<ContextMenuItem>

PropTypeDefaultDescription
insetboolean-
variantdefault | destructive-

<ContextMenuLabel>

PropTypeDefaultDescription
insetboolean-

<ContextMenuSubTrigger>

PropTypeDefaultDescription
insetboolean-

Example

Right click here
"use client"

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@strongtie/design-system/context-menu"

export function ContextMenuDefault() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-64">
        <ContextMenuItem>
          Back
          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem disabled>
          Forward
          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Reload
          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          Save Page As...
          <ContextMenuShortcut>⌘S</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>Print...</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

  • context-menu-checkbox-item
  • context-menu-content
  • context-menu-item
  • context-menu-label
  • context-menu-radio-item
  • context-menu-separator
  • context-menu-shortcut
  • context-menu-sub-content
  • context-menu-sub-trigger

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

CommandDate Picker

On This Page

ExampleInstallationComponentsProps<ContextMenuItem><ContextMenuLabel><ContextMenuSubTrigger>ExampleStylingClassesAccessibility

Contribute

  • Report an issue
  • Request a feature
  • Edit this page