Dropdown Menu

DropdownMenu 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

div(class: 'grid grid-cols-1 sm:grid-cols-3 gap-4') do
	# -- TOP --
	DropdownMenu(options: { placement: 'top' }) do
		DropdownMenuTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'top' }
		end
		DropdownMenuContent do
			DropdownMenuLabel { "My Account" }
			DropdownMenuSeparator
			DropdownMenuItem(href: '#') { "Profile" }
			DropdownMenuItem(href: '#') { "Billing" }
			DropdownMenuItem(href: '#') { "Team" }
			DropdownMenuItem(href: '#') { "Subscription" }
		end
	end

	DropdownMenu(options: { placement: 'top-start' }) do
		DropdownMenuTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'top-start' }
		end
		DropdownMenuContent do
			DropdownMenuLabel { "My Account" }
			DropdownMenuSeparator
			DropdownMenuItem(href: '#') { "Profile" }
			DropdownMenuItem(href: '#') { "Billing" }
			DropdownMenuItem(href: '#') { "Team" }
			DropdownMenuItem(href: '#') { "Subscription" }
		end
	end

	DropdownMenu(options: { placement: 'top-end' }) do
		DropdownMenuTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'top-end' }
		end
		DropdownMenuContent do
			DropdownMenuLabel { "My Account" }
			DropdownMenuSeparator
			DropdownMenuItem(href: '#') { "Profile" }
			DropdownMenuItem(href: '#') { "Billing" }
			DropdownMenuItem(href: '#') { "Team" }
			DropdownMenuItem(href: '#') { "Subscription" }
		end
	end

	# -- BOTTOM --
	DropdownMenu(options: { placement: 'bottom' }) do
		DropdownMenuTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'bottom' }
		end
		DropdownMenuContent do
			DropdownMenuLabel { "My Account" }
			DropdownMenuSeparator
			DropdownMenuItem(href: '#') { "Profile" }
			DropdownMenuItem(href: '#') { "Billing" }
			DropdownMenuItem(href: '#') { "Team" }
			DropdownMenuItem(href: '#') { "Subscription" }
		end
	end

	DropdownMenu(options: { placement: 'bottom-start' }) do
		DropdownMenuTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'bottom-start' }
		end
		DropdownMenuContent do
			DropdownMenuLabel { "My Account" }
			DropdownMenuSeparator
			DropdownMenuItem(href: '#') { "Profile" }
			DropdownMenuItem(href: '#') { "Billing" }
			DropdownMenuItem(href: '#') { "Team" }
			DropdownMenuItem(href: '#') { "Subscription" }
		end
	end

	DropdownMenu(options: { placement: 'bottom-end' }) do
		DropdownMenuTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'bottom-end' }
		end
		DropdownMenuContent do
			DropdownMenuLabel { "My Account" }
			DropdownMenuSeparator
			DropdownMenuItem(href: '#') { "Profile" }
			DropdownMenuItem(href: '#') { "Billing" }
			DropdownMenuItem(href: '#') { "Team" }
			DropdownMenuItem(href: '#') { "Subscription" }
		end
	end

	# -- LEFT --
	DropdownMenu(options: { placement: 'left' }) do
		DropdownMenuTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'left' }
		end
		DropdownMenuContent do
			DropdownMenuLabel { "My Account" }
			DropdownMenuSeparator
			DropdownMenuItem(href: '#') { "Profile" }
			DropdownMenuItem(href: '#') { "Billing" }
			DropdownMenuItem(href: '#') { "Team" }
			DropdownMenuItem(href: '#') { "Subscription" }
		end
	end

	DropdownMenu(options: { placement: 'left-start' }) do
		DropdownMenuTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'left-start' }
		end
		DropdownMenuContent do
			DropdownMenuLabel { "My Account" }
			DropdownMenuSeparator
			DropdownMenuItem(href: '#') { "Profile" }
			DropdownMenuItem(href: '#') { "Billing" }
			DropdownMenuItem(href: '#') { "Team" }
			DropdownMenuItem(href: '#') { "Subscription" }
		end
	end

	DropdownMenu(options: { placement: 'left-end' }) do
		DropdownMenuTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'left-end' }
		end
		DropdownMenuContent do
			DropdownMenuLabel { "My Account" }
			DropdownMenuSeparator
			DropdownMenuItem(href: '#') { "Profile" }
			DropdownMenuItem(href: '#') { "Billing" }
			DropdownMenuItem(href: '#') { "Team" }
			DropdownMenuItem(href: '#') { "Subscription" }
		end
	end

	# -- RIGHT --
	DropdownMenu(options: { placement: 'right' }) do
		DropdownMenuTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'right' }
		end
		DropdownMenuContent do
			DropdownMenuLabel { "My Account" }
			DropdownMenuSeparator
			DropdownMenuItem(href: '#') { "Profile" }
			DropdownMenuItem(href: '#') { "Billing" }
			DropdownMenuItem(href: '#') { "Team" }
			DropdownMenuItem(href: '#') { "Subscription" }
		end
	end

	DropdownMenu(options: { placement: 'right-start' }) do
		DropdownMenuTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'right-start' }
		end
		DropdownMenuContent do
			DropdownMenuLabel { "My Account" }
			DropdownMenuSeparator
			DropdownMenuItem(href: '#') { "Profile" }
			DropdownMenuItem(href: '#') { "Billing" }
			DropdownMenuItem(href: '#') { "Team" }
			DropdownMenuItem(href: '#') { "Subscription" }
		end
	end

	DropdownMenu(options: { placement: 'right-end' }) do
		DropdownMenuTrigger(class: 'w-full') do
			Button(variant: :outline, class: 'w-full justify-center') { 'right-end' }
		end
		DropdownMenuContent do
			DropdownMenuLabel { "My Account" }
			DropdownMenuSeparator
			DropdownMenuItem(href: '#') { "Profile" }
			DropdownMenuItem(href: '#') { "Billing" }
			DropdownMenuItem(href: '#') { "Team" }
			DropdownMenuItem(href: '#') { "Subscription" }
		end
	end
end

DropdownMenu(options: { trigger: "mouseenter focus" }) 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