Dropdown Menu

Displays a menu of actions or options triggered by a button, supporting items, checkboxes, radio groups, and submenus.

Basic

A simple "My Account" dropdown with items and keyboard shortcuts.

With Checkboxes & Radio

Checkbox items for toggles and radio groups for single-select options.

Usage

julia

using Suite

DropdownMenu(
    DropdownMenuTrigger(
        Button(variant="outline", "Open Menu")
    ),
    DropdownMenuContent(
        DropdownMenuLabel("Actions"),
        DropdownMenuSeparator(),
        DropdownMenuGroup(
            DropdownMenuItem("Profile", DropdownMenuShortcut("Cmd+P")),
            DropdownMenuItem("Settings", DropdownMenuShortcut("Cmd+,")),
        ),
        DropdownMenuSeparator(),
        DropdownMenuItem("Log out"),
    )
)

Keyboard Interactions

Key	Action
`Arrow Down`	Move focus to the next menu item
`Arrow Up`	Move focus to the previous menu item
`Enter / Space`	Activate the focused menu item
`Escape`	Close the dropdown menu
`Arrow Right`	Open the focused submenu
`Arrow Left`	Close the current submenu
`Home`	Move focus to the first menu item
`End`	Move focus to the last menu item
`Type-ahead`	Focus item by typing its label

API Reference

DropdownMenu

Prop	Type	Default	Description
open	Bool	false	Controlled open state
default_open	Bool	false	Initial open state (uncontrolled)
on_open_change	Function	nothing	Callback when open state changes
class	String	""	Additional CSS classes

DropdownMenuTrigger

Prop	Type	Default	Description
children...	Any	-	Trigger content (usually a button)
as_child	Bool	false	Merge props into child element
class	String	""	Additional CSS classes

DropdownMenuContent

Prop	Type	Default	Description
side	String	"bottom"	Preferred side: "top", "right", "bottom", "left"
align	String	"start"	Alignment: "start", "center", "end"
side_offset	Number	4	Offset from the trigger (px)
class	String	""	Additional CSS classes

DropdownMenuGroup

Prop	Type	Default	Description
children...	Any	-	Grouped menu items
class	String	""	Additional CSS classes

DropdownMenuLabel

Prop	Type	Default	Description
children...	Any	-	Label text
inset	Bool	false	Add left padding to align with items
class	String	""	Additional CSS classes

DropdownMenuItem

Prop	Type	Default	Description
children...	Any	-	Item content
disabled	Bool	false	Disable interaction
inset	Bool	false	Add left padding to align with labeled groups
on_select	Function	nothing	Callback when item is selected
class	String	""	Additional CSS classes

DropdownMenuCheckboxItem

Prop	Type	Default	Description
checked	Bool	false	Whether the checkbox is checked
on_checked_change	Function	nothing	Callback when checked state changes
disabled	Bool	false	Disable interaction
children...	Any	-	Item content
class	String	""	Additional CSS classes

DropdownMenuRadioGroup

Prop	Type	Default	Description
value	String	""	Currently selected radio value
on_value_change	Function	nothing	Callback when selection changes
children...	Any	-	Radio items
class	String	""	Additional CSS classes

DropdownMenuRadioItem

Prop	Type	Default	Description
value	String	""	Value for this radio option (required)
disabled	Bool	false	Disable interaction
children...	Any	-	Item content
class	String	""	Additional CSS classes

DropdownMenuItemIndicator

Prop	Type	Default	Description
children...	Any	-	Custom indicator content (default: check icon)
class	String	""	Additional CSS classes

DropdownMenuSeparator

Prop	Type	Default	Description
class	String	""	Additional CSS classes

DropdownMenuShortcut

Prop	Type	Default	Description
children...	Any	-	Shortcut text (e.g. "Cmd+K")
class	String	""	Additional CSS classes

DropdownMenuSub

Prop	Type	Default	Description
open	Bool	false	Controlled open state of submenu
default_open	Bool	false	Initial open state (uncontrolled)
on_open_change	Function	nothing	Callback when submenu open state changes
class	String	""	Additional CSS classes

DropdownMenuSubTrigger

Prop	Type	Default	Description
children...	Any	-	Trigger content for the submenu
disabled	Bool	false	Disable interaction
inset	Bool	false	Add left padding to align with labeled groups
class	String	""	Additional CSS classes

DropdownMenuSubContent

Prop	Type	Default	Description
side_offset	Number	2	Offset from the sub-trigger (px)
align_offset	Number	-5	Vertical alignment offset (px)
children...	Any	-	Submenu content
class	String	""	Additional CSS classes