ItemDropdown() — ui Function Reference

Architecture documentation for the ItemDropdown() function in item-dropdown.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ItemDropdown() — ui Function Reference

Dependency Diagram

graph TD
  8ed9936c_0945_afb4_2e1b_17a78d36d516["ItemDropdown()"]
  96fa455a_13de_5120_ab3b_456bb582932f["item-dropdown.tsx"]
  8ed9936c_0945_afb4_2e1b_17a78d36d516 -->|defined in| 96fa455a_13de_5120_ab3b_456bb582932f
  style 8ed9936c_0945_afb4_2e1b_17a78d36d516 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/item-dropdown.tsx lines 43–73

export default function ItemDropdown() {
  return (
    <div className="flex min-h-64 w-full max-w-md flex-col items-center gap-6">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline" size="sm" className="w-fit">
            Select <ChevronDownIcon />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-72 [--radius:0.65rem]" align="end">
          {people.map((person) => (
            <DropdownMenuItem key={person.username} className="p-0">
              <Item size="sm" className="w-full p-2">
                <ItemMedia>
                  <Avatar className="size-8">
                    <AvatarImage src={person.avatar} className="grayscale" />
                    <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>
                  </Avatar>
                </ItemMedia>
                <ItemContent className="gap-0.5">
                  <ItemTitle>{person.username}</ItemTitle>
                  <ItemDescription>{person.email}</ItemDescription>
                </ItemContent>
              </Item>
            </DropdownMenuItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}