AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Context Menu
Displays a menu of actions triggered by a right click.
Right click here
Copy⌘C
Paste⌘V
Cut⌘X
Actions
Delete⌘⌫
templ
templ ContextMenuDemo() {
@ui.ContextMenu("", nil) {
@ui.ContextMenuTrigger("flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm", nil) {
Right click here
}
@ui.ContextMenuContent("w-64", nil) {
@ui.ContextMenuItem("", nil) {
@icons.Copy(icons.Props{Class: "mr-2 h-4 w-4"})
<span>Copy</span>
@ui.ContextMenuShortcut("", nil) {
{ "⌘C" }
}
}
@ui.ContextMenuItem("", nil) {
@icons.Clipboard(icons.Props{Class: "mr-2 h-4 w-4"})
<span>Paste</span>
@ui.ContextMenuShortcut("", nil) {
{ "⌘V" }
}
}
@ui.ContextMenuItem("", nil) {
@icons.Scissors(icons.Props{Class: "mr-2 h-4 w-4"})
<span>Cut</span>
@ui.ContextMenuShortcut("", nil) {
{ "⌘X" }
}
}
@ui.ContextMenuSeparator("", nil)
@ui.ContextMenuLabel("", nil) {
Actions
}
@ui.ContextMenuSeparator("", nil)
@ui.ContextMenuItem("", nil) {
@icons.Trash(icons.Props{Class: "mr-2 h-4 w-4"})
<span>Delete</span>
@ui.ContextMenuShortcut("", nil) {
{ "⌘⌫" }
}
}
}
}
}