Menu

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>Options</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>hello-world.md</DropdownMenuLabel>
    <DropdownMenuItem><PenLine /> Rename</DropdownMenuItem>
    <DropdownMenuCheckboxItem checked>Show word count</DropdownMenuCheckboxItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">
      <Trash2 /> Delete
      <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

{/* chevron trigger, menu aligned to the end */}
<DropdownMenuTrigger render={<Button variant="secondary" />}>Options<ChevronDown /></DropdownMenuTrigger>
<DropdownMenuContent align="end">
  <DropdownMenuSub>…</DropdownMenuSub>
  <DropdownMenuCheckboxItem checked><Star /> Starred</DropdownMenuCheckboxItem>
  <DropdownMenuRadioGroup value={view} onValueChange={setView}>
    <DropdownMenuRadioItem value="grid"><LayoutGrid /> Grid</DropdownMenuRadioItem>
  </DropdownMenuRadioGroup>
  <DropdownMenuItem render={<a href="/design" />}>Open in browser</DropdownMenuItem>
  <DropdownMenuItem disabled>Publish (Studio only)<DropdownMenuShortcut><Lock /></DropdownMenuShortcut></DropdownMenuItem>
</DropdownMenuContent>

{/* custom trigger: an avatar */}
<DropdownMenuTrigger render={<button className="rounded-full" />}><Avatar>…</Avatar></DropdownMenuTrigger>