Phlex Components
x
1
2
3
4
5
6
7
8
9
10
<div>
  <div data-controller="popover" data-popover-options-value="{"placement":"top","trigger":"click"}">
    <div data-popover-target="trigger" class="inline-block w-full"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground px-4 py-2 h-9 text-sm">Open</button></div>
    <template data-popover-target="content">
      <div data-state="open" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-56">
        <h3 class="px-2 py-1.5 text-sm font-semibold">My Account</h3>
        <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-muted"></div>
        <a href="#" role="menuitem" class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50" data-action="click->popover#close" data-popover-target="menuItem" tabindex="-1" data-orientation="vertical">Profile</a><a href="#" role="menuitem" class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50" data-action="click->popover#close" data-popover-target="menuItem" tabindex="-1" data-orientation="vertical">Billing</a><a href="#" role="menuitem" class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50" data-action="click->popover#close" data-popover-target="menuItem" tabindex="-1" data-orientation="vertical">Team</a><a href="#" role="menuitem" class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50" data-action="click->popover#close" data-popover-target="menuItem" tabindex="-1" data-orientation="vertical">Subscription</a></div>
    </template></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
render(TestView.new) do
  DropdownMenu(options: {placement:}) do
    DropdownMenuTrigger(class: "w-full") do
      Button(variant: :outline) { "Open" }
    end
    DropdownMenuContent do
      DropdownMenuLabel { "My Account" }
      DropdownMenuSeparator()
      DropdownMenuItem(href: "#") { "Profile" }
      DropdownMenuItem(href: "#") { "Billing" }
      DropdownMenuItem(href: "#") { "Team" }
      DropdownMenuItem(href: "#") { "Subscription" }
    end
  end
end

Default DropdownMenu

Param Description Input

—