Context Menu

Displays a menu triggered by right-click (contextmenu event) or a 700ms touch long-press.

Basic

Right-click the area to open a context menu with navigation items.

Right click here

With Checkboxes

Context menu with checkbox items and a radio group.

Right click here

Usage

julia

using Suite

ContextMenu(
    ContextMenuTrigger(
        Div(:class => "flex h-36 w-full items-center justify-center rounded-md border border-dashed",
            "Right click here"
        )
    ),
    ContextMenuContent(
        ContextMenuItem("Back"),
        ContextMenuItem("Forward"),
        ContextMenuItem("Reload"),
        ContextMenuSeparator(),
        ContextMenuItem("Bookmark"),
    )
)

Keyboard Interactions

Key	Action
`Arrow Down`	Move focus to the next item
`Arrow Up`	Move focus to the previous item
`Enter / Space`	Activate the focused item
`Escape`	Close the context menu
`Arrow Right`	Open a submenu (when focused on a sub-trigger)
`Arrow Left`	Close a submenu (when inside a submenu)
`Type-ahead`	Focus an item by typing its label text

API Reference

ContextMenu

Prop	Type	Default	Description
children...	Any	-	Trigger and content elements
class	String	""	Additional CSS classes

ContextMenuTrigger

Prop	Type	Default	Description
children...	Any	-	The right-clickable area
class	String	""	Additional CSS classes

ContextMenuContent

Prop	Type	Default	Description
children...	Any	-	Menu items, separators, groups
align_offset	Int	0	Offset from the alignment edge in pixels
class	String	""	Additional CSS classes

ContextMenuItem

Prop	Type	Default	Description
children...	Any	-	Item content (text, shortcuts)
disabled	Bool	false	Disable this item
class	String	""	Additional CSS classes

ContextMenuCheckboxItem

Prop	Type	Default	Description
children...	Any	-	Item content
checked	Bool	false	Whether the item is checked
disabled	Bool	false	Disable this item
class	String	""	Additional CSS classes

ContextMenuRadioGroup

Prop	Type	Default	Description
children...	Any	-	Radio items
value	String	""	Currently selected value
class	String	""	Additional CSS classes

ContextMenuRadioItem

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

ContextMenuSub

Prop	Type	Default	Description
children...	Any	-	Sub-trigger and sub-content
class	String	""	Additional CSS classes

ContextMenuSubTrigger

Prop	Type	Default	Description
children...	Any	-	Trigger content
disabled	Bool	false	Disable this trigger
class	String	""	Additional CSS classes

ContextMenuSubContent

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

ContextMenuGroup

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

ContextMenuLabel

Prop	Type	Default	Description
children...	Any	-	Label text
class	String	""	Additional CSS classes

ContextMenuSeparator

Prop	Type	Default	Description
class	String	""	Additional CSS classes

ContextMenuShortcut

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

ContextMenuItemIndicator

Prop	Type	Default	Description
children...	Any	-	Custom indicator content (optional)
class	String	""	Additional CSS classes