shadcn-templ

Context Menu

Displays a menu of actions triggered by a right click.

Right click here
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) {
					{ "⌘⌫" }
				}
			}
		}
	}
}