ContextMenuWithSides() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ContextMenuWithSides() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/context-menu-example.tsx lines 395–425

function ContextMenuWithSides() {
  return (
    <Example title="With Sides" containerClassName="col-span-2">
      <div className="flex flex-wrap justify-center gap-2">
        {(
          [
            "inline-start",
            "left",
            "top",
            "bottom",
            "right",
            "inline-end",
          ] as const
        ).map((side) => (
          <ContextMenu key={side}>
            <ContextMenuTrigger className="flex aspect-[2/0.5] items-center justify-center rounded-lg border p-4 text-sm capitalize">
              {side.replace("-", " ")}
            </ContextMenuTrigger>
            <ContextMenuContent side={side}>
              <ContextMenuGroup>
                <ContextMenuItem>Back</ContextMenuItem>
                <ContextMenuItem>Forward</ContextMenuItem>
                <ContextMenuItem>Reload</ContextMenuItem>
              </ContextMenuGroup>
            </ContextMenuContent>
          </ContextMenu>
        ))}
      </div>
    </Example>
  )
}