A context menu can be added to a ZK component by setting its attribute "context" to a menupopup component's ID.

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<zk>
	<div context="editPopup" width="120px" height="118px"
		 style="cursor: pointer; background-image: url('${c:encodeURL('/widgets/menu/context_menu/img/msn2.gif')}');"/>
	<menupopup id="editPopup">
		<menuitem iconSclass="z-icon-commenting-o" label="Message" />
		<menuseparator />
		<menuitem iconSclass="z-icon-user" label="Profile" />
		<menuitem iconSclass="z-icon-envelope" label="Mail to" />
		<menuseparator />
		<menu label="Group" iconSclass="z-icon-group">
			<menupopup>
				<menu label="Add to...">
					<menupopup>
						<menuitem label="Member" autocheck="true" checkmark="true" checked="true" />
						<menuitem label="Managers" autocheck="true" checkmark="true" />
						<menuitem label="Guest" autocheck="true" checkmark="true" />
						<menuitem label="Customers" autocheck="true" checkmark="true" />
					</menupopup>
				</menu>
				<menu label="Move to...">
					<menupopup>
						<menuitem label="Member" autocheck="true" checkmark="true" />
						<menuitem label="Managers" autocheck="true" checkmark="true" />
						<menuitem label="Guest" autocheck="true" checkmark="true" />
						<menuitem label="Customers" autocheck="true" checkmark="true" />
					</menupopup>
				</menu>
			</menupopup>
		</menu>
		<menuitem label="Block" iconSclass="z-icon-ban" />
		<menuitem label="Remove contact" iconSclass="z-icon-times" />
	</menupopup>
</zk>