Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Usage
Example
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
Copied!
Copy failed!
Placement
If the DropdownMenu conflicts with edge, it will auto-adjust it's placement
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
Copied!
Copy failed!
Open on hover
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
Copied!
Copy failed!
Components
Component | Built using | Source |
---|---|---|
Button | Phlex | |
DropdownMenu | Phlex | |
DropdownMenuContent | Phlex | |
DropdownMenuItem | Phlex | |
DropdownMenuLabel | Phlex | |
DropdownMenuTrigger | Phlex |
Component | Built using | Source |
---|---|---|
DropdownMenu | Phlex | |
DropdownMenuContent | Phlex | |
DropdownMenuItem | Phlex | |
DropdownMenuLabel | Phlex | |
DropdownMenuSeparator | Phlex | |
DropdownMenuTrigger | Phlex | |
DropdownMenuController | Stimulus JS |