The toolbar can be generated below the tabbox. tabbox .
This demo shows how the concept of a navigation tab can be implemented by inserting toolbar into tabpanel .

<zk xmlns:x="xhtml">
	<style>	
		.nav_toolbar .z-toolbarbutton-content i { font-size: 20px;}
		.nav_tabs .z-tabpanel { padding: 0; border-bottom: 0 none;}
		.nav_tabs .z-tabpanels .z-toolbarbutton-content { padding: 4px;}
		.nav_category { cursor:pointer; }
		.nav_text { color: #696569; font-size : 24px; font-weight: bold;}
	</style>
	<tabbox width="100%" sclass="nav_tabs">
		<tabs id="tabs">
			<tab label="Our Product" onSelect="updateCategory(self.label)"/>
			<tab label="Live Demo" onSelect="updateCategory(self.label)"/>
			<tab label="Online Documentation" onSelect="updateCategory(self.label)"/>
		</tabs>
		<toolbar sclass="nav_toolbar">
			<toolbarbutton target="_zkdemo" style="color: #3a92c8;" 
					iconSclass="z-icon-twitter-square" href="http://twitter.com/zkoss" />
			<toolbarbutton target="_zkdemo" style="color: #3b5998;" 
					iconSclass="z-icon-facebook-square" href="http://www.facebook.com/zk.framework" />
			<toolbarbutton target="_zkdemo" style="color: #696569;" 
					iconSclass="z-icon-github-square" href="https://github.com/zkoss/" />
		</toolbar>
		<tabpanels>
			<tabpanel>
				<toolbar hflex="true">
					<toolbarbutton label="Product 1" onClick="updateSubPage(self.label)" />
					<toolbarbutton label="Product 2" onClick="updateSubPage(self.label)" />
					<toolbarbutton label="Product 3" onClick="updateSubPage(self.label)" />
				</toolbar>
			</tabpanel>
			<tabpanel>
				<toolbar hflex="true">
					<toolbarbutton label="Live Demo 1" onClick="updateSubPage(self.label)" />
					<toolbarbutton label="Live Demo 2" onClick="updateSubPage(self.label)" />
					<toolbarbutton label="Live Demo 3" onClick="updateSubPage(self.label)" />
					<toolbarbutton label="Live Demo 4" onClick="updateSubPage(self.label)" />
					<toolbarbutton label="Live Demo 5" onClick="updateSubPage(self.label)" />
					<toolbarbutton label="Live Demo 6" onClick="updateSubPage(self.label)" />
				</toolbar>
			</tabpanel>
			<tabpanel>
				<toolbar hflex="true">
					<toolbarbutton label="Documentation 1" onClick="updateSubPage(self.label)" />
					<toolbarbutton label="Documentation 2" onClick="updateSubPage(self.label)" />
					<toolbarbutton label="Documentation 3" onClick="updateSubPage(self.label)" />
					<toolbarbutton label="Documentation 4" onClick="updateSubPage(self.label)" />
					<toolbarbutton label="Documentation 5" onClick="updateSubPage(self.label)" />
				</toolbar>
			</tabpanel>
		</tabpanels>
	</tabbox>
	<separator height="30px"></separator>
	<zscript><![CDATA[
		void updateCategory(String category) {
			current_category.setValue(category);
			current_subpage.setValue("Index");
		}
		void updateSubPage(String sub) {
			current_subpage.setValue(sub);
		}
	]]></zscript>
	<hlayout>
		<label id="current_category" sclass="nav_text nav_category" onClick='updateSubPage("Index")'>Our Product</label>
		<label sclass="nav_text">-</label>
		<label id="current_subpage" sclass="nav_text">Index</label>
	</hlayout>
</zk>