DropdownMenuSides() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ DropdownMenuSides() — ui Function Reference

Dependency Diagram

graph TD
  71ff9f55_246f_04c0_125e_ee7a9c364298["DropdownMenuSides()"]
  1f0e6dcd_ae10_5e0e_4435_9470dee69154["dropdown-menu-example.tsx"]
  71ff9f55_246f_04c0_125e_ee7a9c364298 -->|defined in| 1f0e6dcd_ae10_5e0e_4435_9470dee69154
  style 71ff9f55_246f_04c0_125e_ee7a9c364298 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx lines 89–121

function DropdownMenuSides() {
  return (
    <Example title="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) => (
          <DropdownMenu key={side}>
            <DropdownMenuTrigger
              render={<Button variant="outline" className="w-fit capitalize" />}
            >
              {side.replace("-", " ")}
            </DropdownMenuTrigger>
            <DropdownMenuContent side={side}>
              <DropdownMenuGroup>
                <DropdownMenuItem>Profile</DropdownMenuItem>
                <DropdownMenuItem>Billing</DropdownMenuItem>
                <DropdownMenuItem>Settings</DropdownMenuItem>
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>
        ))}
      </div>
    </Example>
  )
}