DropdownMenu

Labels, items, separators, checkboxes, radio groups — the full menu grammar.

DropdownMenuTrigger opens the floating panel from a trigger button — press anywhere else, Escape, or pick an item to close it (checkbox and radio menus set KeepOpen, because picking is not leaving). DropdownMenu remains the raw panel for inline use. The row family covers plain items, icon items, shortcut hints, toggleable checkbox items, exclusive radio items, group labels and separators; all row STATE lives with the caller. Submenus are on the roadmap; web-specific composition and RTL are "from the web".

Installation

Use the module import (the default), or own the source: lotusui add vendors the component into your app and lotusui update keeps the copy mergeable — see Registry.

go get github.com/ikaito-com/lotusui

# or vendor the source into your app:
go run github.com/ikaito-com/lotusui/cmd/lotusui add dropdown-menu

Usage

The trigger opens the panel; labels head groups, separators divide them, items act.

open demo ↗

var menu lotusui.DropdownMenuTrigger

menu.Layout(th, gtx, "Open",
	lotusui.DropdownMenuLabel(th, "My Account"),
	lotusui.DropdownMenuItem(th, &profile, "Profile", false),
	lotusui.DropdownMenuItem(th, &billing, "Billing", false),
	lotusui.DropdownMenuSeparator(th),
	lotusui.DropdownMenuItem(th, &team, "Team", false),
	lotusui.DropdownMenuItem(th, &sub, "Subscription", false),
)

Icons

open demo ↗

lotusui.DropdownMenuItemIcon(th, &rename, lotusui.IconEdit, "Rename", false)

Shortcuts

Right-aligned keyboard hints in muted ink — display only; binding the key is yours.

open demo ↗

lotusui.DropdownMenuShortcutItem(th, &save, "Save", "⌘S", false)

Checkboxes

Toggleable rows with a check-mark gutter; flip your bool on Clicked.

open demo ↗

if chk.Clicked(gtx) { showStatus = !showStatus }
lotusui.DropdownMenuCheckboxItem(th, &chk, "Show status bar", showStatus)
menu.KeepOpen = true // picking is not leaving

Checkboxes with icons

A leading icon between the gutter and the label.

open demo ↗

lotusui.DropdownMenuCheckboxItemIcon(th, &mail, lotusui.IconMail, "Email notifications", notifMail)

Radio group with icons

open demo ↗

lotusui.DropdownMenuRadioItemIcon(th, &card, lotusui.IconCreditCard, "Credit Card", payment == 0)

Radio group

Exclusive rows with a dot gutter; the group is your int.

open demo ↗

lotusui.DropdownMenuRadioItem(th, &top, "Top", position == 0)
lotusui.DropdownMenuRadioItem(th, &bottom, "Bottom", position == 1)

Destructive

danger renders danger ink on a danger-tinted hover — never a saturated fill.

open demo ↗

lotusui.DropdownMenuItem(th, &del, "Delete workspace…", true)

Submenu

DropdownMenuSub nests a side panel that opens while the pointer rests on the row or the panel.

open demo ↗

var sub lotusui.DropdownMenuSub

menu.Layout(th, gtx, "Open",
	lotusui.DropdownMenuItem(th, &newTab, "New Tab", false),
	sub.Item(th, "More Tools",
		lotusui.DropdownMenuItem(th, &save, "Save Page As…", false),
		lotusui.DropdownMenuItem(th, &dev, "Developer Tools", false),
	),
)

Complex

Everything together: label, shortcut item, icon item, separators, a toggle, a destructive exit.

open demo ↗

lotusui.DropdownMenu(th,
	lotusui.DropdownMenuLabel(th, "My Account"),
	lotusui.DropdownMenuShortcutItem(th, &profile, "Profile", "⇧⌘P", false),
	lotusui.DropdownMenuItemIcon(th, &settings, lotusui.IconSettings, "Settings", false),
	lotusui.DropdownMenuSeparator(th),
	lotusui.DropdownMenuCheckboxItem(th, &urls, "Show full URLs", showURLs),
	lotusui.DropdownMenuSeparator(th),
	lotusui.DropdownMenuItem(th, &del, "Delete account", true),
)

API

Option	Type	Description
`DropdownMenuTrigger.Open`	`bool`	The panel's state; the trigger toggles it.
`DropdownMenuTrigger.KeepOpen`	`bool`	Suppress close-on-selection — checkbox/radio menus.
`DropdownMenuTrigger.Width`	`unit.Dp`	Panel width; zero means 224dp.
`DropdownMenuTrigger.Variant`	`ButtonVariant`	Trigger button style; the zero value renders outline.
`DropdownMenuTrigger.Align`	`PopoverAlign`	Panel edge against the trigger — PopoverEnd keeps right-edge menus on screen.
`DropdownMenuCheckboxItemIcon / RadioItemIcon`	`widget`	Gutter rows with a leading icon.
`DropdownMenuItem(th, btn, label, danger)`	`widget`	One action row; danger = destructive ink.
`DropdownMenuItemIcon / ShortcutItem`	`widget`	Leading icon; right-aligned keyboard hint.
`DropdownMenuCheckboxItem / RadioItem`	`widget`	Check/dot gutter; state lives with the caller.
`DropdownMenuLabel / Separator`	`widget`	Group heading; hairline divider.
`DropdownMenuSub.Item(th, label, items…)`	`widget`	The nested submenu row; side panel on hover.