🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Context Menu

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>`

Prop	Type	Default	Description
`inset`	`boolean`	-
`variant`	`default` \| `destructive`	-

`<ContextMenuLabel>`

Prop	Type	Default	Description
`inset`	`boolean`	-

`<ContextMenuSubTrigger>`

Prop	Type	Default	Description
`inset`	`boolean`	-

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.

Command Date Picker

On This Page

Example Installation Components Props <ContextMenuItem><ContextMenuLabel><ContextMenuSubTrigger>Example Styling Classes Accessibility

Contribute

Context Menu

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

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>`

Prop	Type	Default	Description
`inset`	`boolean`	-
`variant`	`default` \| `destructive`	-

`<ContextMenuLabel>`

Prop	Type	Default	Description
`inset`	`boolean`	-

`<ContextMenuSubTrigger>`

Prop	Type	Default	Description
`inset`	`boolean`	-

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.

Command Date Picker

On This Page

Example Installation Components Props <ContextMenuItem><ContextMenuLabel><ContextMenuSubTrigger>Example Styling Classes Accessibility

Contribute