The menu component(also called dropdown/drop-down/pull-down menu) allows the embedding of images or other menu components (menupopup and menuitem).

<zk>
	<style>.z-menubar-hor, .z-menubar-ver { border: 1px solid #D8D8D8; } 
	.content {overflow-x: hidden;overflow-y: scroll;}</style>

	<panel border="normal" title="ZK Report Viewer">
		<panelchildren>
			<menubar id="menubar" width="100%">
				<menu label="File">
					<menupopup>
						<menu label="New" image="/widgets/menu/drop-down_menu/img/file_new.png">
							<menupopup>
								<menuitem label="Document" onClick="alert(self.label)" image="/widgets/menu/drop-down_menu/img/file_new_writer.png" />
								<menuitem label="Spreadsheet" onClick="alert(self.label)" image="/widgets/menu/drop-down_menu/img/file_new_spreadsheet.png" />
								<menuitem label="Presentation" onClick="alert(self.label)" image="/widgets/menu/drop-down_menu/img/file_new_presentation.png" />
							</menupopup>
						</menu>
						<menuitem label="Open.." onClick="alert(self.label)" image="/widgets/menu/drop-down_menu/img/file_open.png" />
						<menuseparator></menuseparator>
						<menuitem label="Save" onClick="alert(self.label)" image="/widgets/menu/drop-down_menu/img/file_save.png" />
						<menuitem label="Save As..." onClick="alert(self.label)" image="/widgets/menu/drop-down_menu/img/file_save-as.png" />
						<menuitem label="Save All" onClick="alert(self.label)" image="/widgets/menu/drop-down_menu/img/file_save-all.png" />
						<menuitem label="Close" onClick="alert(self.label)" image="/widgets/menu/drop-down_menu/img/file_close.png" />
						<menuitem label="Close All" onClick="alert(self.label)" image="/widgets/menu/drop-down_menu/img/file_close-all.png" />
						<menuseparator></menuseparator>
						<menuitem label="Import" onClick="alert(self.label)" image="/widgets/menu/drop-down_menu/img/file_import.png" />
						<menuitem label="Export" disabled="true" image="/widgets/menu/drop-down_menu/img/file_export.png" />
						<menuseparator></menuseparator>
						<menuitem label="Exit" disabled="true" image="/widgets/menu/drop-down_menu/img/file_exit.png" />
					</menupopup>
				</menu>
				<menu label="Edit">
					<menupopup>
						<menuitem label="Undo" onClick="alert(self.label)" image="/widgets/menu/drop-down_menu/img/edit_undo.png" />
						<menuitem label="Redo" disabled="true" image="/widgets/menu/drop-down_menu/img/edit_redo.png" />
						<menuseparator></menuseparator>
						<menuitem label="Cut" onClick="alert(self.label)" image="/widgets/menu/drop-down_menu/img/edit_cut.png" />
						<menuitem label="Copy" onClick="alert(self.label)" image="/widgets/menu/drop-down_menu/img/edit_copy.png" />
						<menuitem label="Paste" onClick="alert(self.label)" image="/widgets/menu/drop-down_menu/img/edit_paste.png" />
						<menuseparator></menuseparator>
						<menuitem label="Select All" onClick="alert(self.label)" image="/widgets/menu/drop-down_menu/img/edit_select-all.png" />
					</menupopup>
				</menu>
				<menu label="Help">
					<menupopup>
						<menuitem label="Issue tracker" target="_zkdemo" href="http://tracker.zkoss.org" image="/widgets/menu/drop-down_menu/img/bug.png" />
						<menu label="About">
							<menupopup>
								<menuitem label="About Potix" target="_zkdemo" href="http://www.zkoss.org/support/about" onClick="alert(self.label)" />
							</menupopup>
						</menu>
					</menupopup>
				</menu>
				<menuitem label="ZK Web Framework" target="_zkdemo" href="http://www.zkoss.org/download" image="/images/zk16x16.png" onClick="alert(self.label)" />
			</menubar>
			<div height="300px" sclass="content">
				<image src="/widgets/menu/drop-down_menu/img/report.png"></image>
			</div>
		</panelchildren>
	</panel>

</zk>

<vlayout>
	<checkbox label="Autodrop when mouse hover">
		<attribute name="onCheck"><![CDATA[
			menubar.autodrop = self.checked ? true : false;
		]]></attribute>
	</checkbox>
	<checkbox label="Scrollable menu bar">
		<attribute name="onCheck"><![CDATA[
			menubar.scrollable=self.checked;
			menubar.width=self.checked ? "50%" : "100%";
			menubar.invalidate();
		]]></attribute>
	</checkbox>
</vlayout>