The menubar component serves as a container for a set of menus. A menubar could be placed in a vertical or horizontal orientation.

<zk xmlns:n="native">
	<style src="/widgets/menu/menu_orientation/style.css" />
	<zscript><![CDATA[
		Integer[] products = new Integer[] {1, 2, 3, 4, 5, 6, 7, 8};
		Integer num = 4;
		]]></zscript>
	<separator />
	<image src="/widgets/menu/menu_orientation/img/banner.png" />
	<include id="list" src="/widgets/menu/menu_orientation/menu_orientation_hor.zul" style="max-width: 580px"/>
	<separator height="4px"></separator>
	<div sclass="mo_footer">Copyright 2005-2011 zkoss.org. All rights reserved.</div>
</zk>

<zk xmlns:n="native">
	<radiogroup>
		<attribute name="onCheck"><![CDATA[
			boolean isVertical = self.getSelectedItem().getValue().equals("1");
			num = isVertical ? 3 : 4;
			list.src = "";
			list.src = 	isVertical ? 
						"/widgets/menu/menu_orientation/menu_orientation_ver.zul" : 
						"/widgets/menu/menu_orientation/menu_orientation_hor.zul";
		]]></attribute>
		<hlayout valign="middle">
			<n:strong>Orientation:</n:strong>
			<radio label="Horizontal" value="0" selected="true"></radio>
			<radio label="Vertical" value="1"></radio>
		</hlayout>
	</radiogroup>
</zk>

<zk xmlns:n="native">
	<!-- Begin Menu -->
	<menubar id="menubar" autodrop="true">
		<menu label="Hardware">
			<menupopup>
				<menu label="Mainboard CPU &amp; RAM">
					<menupopup>
						<menuitem label="AMD" onClick="alert(self.label)" />
						<menuitem label="Intel" onClick="alert(self.label)" />
						<menuitem label="Others" onClick="alert(self.label)" />
					</menupopup>
				</menu>
				<menu label="Input">
					<menupopup>
						<menu label="Devices">
							<menupopup>
								<menuitem label="Mouse" onClick="alert(self.label)" />
								<menuitem label="Keyboards" onClick="alert(self.label)" />
								<menuitem label="Accessories" onClick="alert(self.label)" />
							</menupopup>
						</menu>
						<menuitem label="Gaming" onClick="alert(self.label)" />
						<menuitem label="Graphic Tablets" onClick="alert(self.label)" />
					</menupopup>
				</menu>
				<menu label="Monitors">
					<menupopup>
						<menuitem label="LCD" onClick="alert(self.label)" />
						<menuitem label="CRT" onClick="alert(self.label)" />
						<menuitem label="Touchscreen" onClick="alert(self.label)" />
					</menupopup>
				</menu>
				<menuseparator></menuseparator>
				<menuitem label="PC" onClick="alert(self.label)" />
				<menuitem label="Mac" onClick="alert(self.label)" />
				<menuitem label="Others" onClick="alert(self.label)" />
			</menupopup>
		</menu>
		<menu label="Software">
			<menupopup>
				<menuitem label="Browsers and Plugins" onClick="alert(self.label)" />
				<menuitem label="Firewalls and Security" onClick="alert(self.label)" />
				<menuitem label="Audio and Video" onClick="alert(self.label)" />
				<menuitem label="Photos and Images" onClick="alert(self.label)" />
				<menuitem label="Desktop" onClick="alert(self.label)" />
				<menuitem label="Office and News" onClick="alert(self.label)" />
				<menuitem label="Developer Tools" onClick="alert(self.label)" />
				<menuitem label="Others" onClick="alert(self.label)" />
			</menupopup>
		</menu>
		<menuitem label="Gaming" onClick="alert(self.label)" />
		<menuitem label="TV &amp; Audio" onClick="alert(self.label)" />
		<menuitem label="Photo &amp; Video" onClick="alert(self.label)" />
		<menuitem label="Communication" onClick="alert(self.label)" />
	</menubar>
	<!-- End Menu -->
	<div id="container" sclass="container" width="570px">
		<vlayout id="product_list" width="100%">
			<n:h1 class="mo_head">Top Sales</n:h1>
			<separator bar="true"></separator>
			<hlayout spacing="10px">
				<zk forEach="${products}">
					<image src="/widgets/menu/menu_orientation/img/product${each}.png" if="${each le num }" />
				</zk>
			</hlayout>
			<separator height="5px"></separator>
			<hlayout spacing="10px">
				<zk forEach="${products}">
					<image src="/widgets/menu/menu_orientation/img/product${each}.png" if="${each gt num }" />
				</zk>
			</hlayout>
		</vlayout>
	</div>
</zk>

<zk xmlns:n="native">
	<hlayout spacing="0">
		<menubar id="menubar" orient="vertical" autodrop="true">
			<menu label="Hardware">
			<menupopup>
				<menu label="Mainboard CPU &amp; RAM">
					<menupopup>
						<menuitem label="AMD" onClick="alert(self.label)" />
						<menuitem label="Intel" onClick="alert(self.label)" />
						<menuitem label="Others" onClick="alert(self.label)" />
					</menupopup>
				</menu>
				<menu label="Input">
					<menupopup>
						<menu label="Devices">
							<menupopup>
								<menuitem label="Mouse" onClick="alert(self.label)" />
								<menuitem label="Keyboards" onClick="alert(self.label)" />
								<menuitem label="Accessories" onClick="alert(self.label)" />
							</menupopup>
						</menu>
						<menuitem label="Gaming" onClick="alert(self.label)" />
						<menuitem label="Graphic Tablets" onClick="alert(self.label)" />
					</menupopup>
				</menu>
				<menu label="Monitors">
					<menupopup>
						<menuitem label="LCD" onClick="alert(self.label)" />
						<menuitem label="CRT" onClick="alert(self.label)" />
						<menuitem label="Touchscreen" onClick="alert(self.label)" />
					</menupopup>
				</menu>
				<menuseparator></menuseparator>
				<menuitem label="PC" onClick="alert(self.label)" />
				<menuitem label="Mac" onClick="alert(self.label)" />
				<menuitem label="Others" onClick="alert(self.label)" />
			</menupopup>
		</menu>
		<menu label="Software">
			<menupopup>
				<menuitem label="Browsers and Plugins" onClick="alert(self.label)" />
				<menuitem label="Firewalls and Security" onClick="alert(self.label)" />
				<menuitem label="Audio and Video" onClick="alert(self.label)" />
				<menuitem label="Photos and Images" onClick="alert(self.label)" />
				<menuitem label="Desktop" onClick="alert(self.label)" />
				<menuitem label="Office and News" onClick="alert(self.label)" />
				<menuitem label="Developer Tools" onClick="alert(self.label)" />
				<menuitem label="Others" onClick="alert(self.label)" />
			</menupopup>
		</menu>
		<menuitem label="Gaming" onClick="alert(self.label)" />
		<menuitem label="TV &amp; Audio" onClick="alert(self.label)" />
		<menuitem label="Photo &amp; Video" onClick="alert(self.label)" />
		<menuitem label="Communication" onClick="alert(self.label)" />
		</menubar>

		<div id="container" sclass="container" width="420px">
			<vlayout id="product_list" width="100%">
				<n:h1 class="mo_head">Top Sales</n:h1>
				<separator bar="true"></separator>
				<hlayout spacing="10px">
					<zk forEach="${products}" if="${each le num }">
						<image src="/widgets/menu/menu_orientation/img/product${each}.png" />
					</zk>
				</hlayout>
				<hlayout spacing="10px">
					<zk forEach="${products}" if="${each gt num and each le (num * 2)}">
						<image src="/widgets/menu/menu_orientation/img/product${each}.png" />
					</zk>
				</hlayout>

			</vlayout>
		</div>
	</hlayout>
</zk>

.container,.z-menubar-hor,.z-menubar-ver {
	border: 1px solid #D8D8D8;
}
.z-menubar-hor {
	width: 580px;
}
.z-menubar-ver {
	border-right: 0 none;
	width: 149px;
	height: 420px;
}

.container {
	padding: 5px;
}

.z-menu-item-body {
	padding: 5px 2px;
}
.z-menubar-ver .z-menu-body,
.z-menubar-ver .z-menu-item-body {
	width: 140px !important;
}

.z-menubar-ver .z-menu-item-body .z-menu-item-inner-m,
.z-menubar-ver .z-menu-body .z-menu-item-inner-m,
.z-menubar-ver .z-menu-item-body .z-menu-inner-m,
.z-menubar-ver .z-menu-body .z-menu-inner-m {
	text-align: left;
}

.mo_head {
	font-size: 24px;
	font-weight: normal;
	color: #F26522;
	margin-bottom: 0px;
}

.mo_footer {
	background: #202020;
	width: 582px;
	height: 20px;
	color: #c6c6c6;
	text-align: center;
}