Context Menu

Basic context menu example demonstrating core behavior.

Package: @solidiom/context-menu
Version: 0.0.1-next.0
Status: stable

Examples

import * as ContextMenu from "@solidiom/context-menu"
import { createSignal } from "solid-js"

const [showLineNumbers, setShowLineNumbers] = createSignal(true)
const [fontSize, setFontSize] = createSignal("medium")

;<ContextMenu.Root>
  <ContextMenu.Trigger>
    <div>Right-click anywhere in this area</div>
  </ContextMenu.Trigger>

  <ContextMenu.Content>
    <ContextMenu.Item onSelect={() => console.log("Cut")}>Cut</ContextMenu.Item>
    <ContextMenu.Item onSelect={() => console.log("Copy")}>Copy</ContextMenu.Item>
    <ContextMenu.Item onSelect={() => console.log("Paste")} disabled>
      Paste
    </ContextMenu.Item>

    <ContextMenu.Separator />

    <ContextMenu.CheckboxItem checked={showLineNumbers()} onCheckedChange={setShowLineNumbers}>
      Show Line Numbers
    </ContextMenu.CheckboxItem>

    <ContextMenu.RadioGroup value={fontSize()} onValueChange={setFontSize}>
      <ContextMenu.RadioItem value="small">Small</ContextMenu.RadioItem>
      <ContextMenu.RadioItem value="medium">Medium</ContextMenu.RadioItem>
      <ContextMenu.RadioItem value="large">Large</ContextMenu.RadioItem>
    </ContextMenu.RadioGroup>
  </ContextMenu.Content>
</ContextMenu.Root>

The context menu opens on right-click. Checkbox items toggle independently, while radio items are mutually exclusive within their group.

View source

        export function Root(props: ContextMenuRootProps) {
  const baseId = createStableId("context-menu")
  const [open, setOpen] = createSignal(false)

  const collection = createCollection()
  const rovingFocus = createRovingFocus()
  const typeahead = createTypeahead({
    onMatch: (item) => {
      rovingFocus.setActiveId(item.id)
    },
  })

  const ctx: ContextMenuContextValue = {
    open,
    setOpen,
    collection,
    rovingFocus,
    typeahead,
    triggerId: `${baseId}-trigger`,
    contentId: `${baseId}-content`,
  }

  return <ContextMenuContext value={ctx}>{props.children}</ContextMenuContext>
}