ContextMenuWithCheckboxes() — ui Function Reference

Architecture documentation for the ContextMenuWithCheckboxes() function in context-menu-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ContextMenuWithCheckboxes() — ui Function Reference

Dependency Diagram

graph TD
  ddafa7f3_60d8_bdcd_93bd_b36276bddfd0["ContextMenuWithCheckboxes()"]
  03f9cfb0_c22e_5573_63bc_bfcbabb1ffc9["context-menu-example.tsx"]
  ddafa7f3_60d8_bdcd_93bd_b36276bddfd0 -->|defined in| 03f9cfb0_c22e_5573_63bc_bfcbabb1ffc9
  style ddafa7f3_60d8_bdcd_93bd_b36276bddfd0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/context-menu-example.tsx lines 276–297

function ContextMenuWithCheckboxes() {
  return (
    <Example title="With Checkboxes">
      <ContextMenu>
        <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
          Right click here
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuGroup>
            <ContextMenuCheckboxItem defaultChecked>
              Show Bookmarks Bar
            </ContextMenuCheckboxItem>
            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
            <ContextMenuCheckboxItem defaultChecked>
              Show Developer Tools
            </ContextMenuCheckboxItem>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
    </Example>
  )
}