Navbar is a component that allows users to locate and link to other pages in a website.

It supports a horizontal/vertical layout as well as a minimized collapsed mode.

<zk>
	<style src="/widgets/menu/navbar/style.css"/>
	<div id="container" sclass="vertical" apply="org.zkoss.bind.BindComposer"
		 viewModel="@id('vm') @init('demo.menu.navbar.NavigationViewModel')">
		<navbar id="navbar" orient="vertical" collapsed="false" 
				onSelect="@command('navigatePage', target=self.selectedItem.attributes['navigationPage'])">

			<nav label="ZK's Pizza" iconSclass="z-icon-home"
				children="@load(vm.pageMap[self.label].values()) @template('navitem')"/>

			<nav label="Customers" iconSclass="z-icon-group" badgeText="3"
				children="@load(vm.pageMap[self.label].values()) @template('navitem')"/>

			<nav label="Orders" iconSclass="z-icon-truck" badgeText="4"
				children="@load(vm.pageMap[self.label].values()) @template('navitem')"/>

			<nav label="Fan Service" iconSclass="z-icon-star"
				children="@load(vm.pageMap[self.label].values()) @template('navitem')"/>
				
			<template name="navitem" var="navigationPage">
				<navitem label="@load(navigationPage.subTitle)" selected="@load(navigationPage.selected)"/>
			</template>
		</navbar>
		
		<include id="contentInclude" mode="instant" sclass="content" 
				 currentPage="@ref(vm.currentPage)" 
				 src="@load(currentPage.includeUri)" />
	</div>
</zk>

<zk>
	<radiogroup>
		<attribute name="onCheck"><![CDATA[
			String orient = self.getSelectedItem().getValue();
			navbar.setOrient(orient);
			container.setSclass(orient);
		]]></attribute>
		<space height="20px"/>
		<vlayout>
			<label value="Orientation:"/>
			<radio label="horizontal" value="horizontal" />
			<radio label="vertical" value="vertical" checked="true"/>
		</vlayout>
	</radiogroup>
	<separator spacing="15px"></separator>
	<checkbox label="Collapsed" checked="false">
		<attribute name="onCheck"><![CDATA[
			navbar.setCollapsed(event.isChecked());
			contentInclude.setSclass(event.isChecked() ? "content collapsed" : "content");
		]]></attribute>
	</checkbox>
</zk>

<zk xmlns:x="xhtml">
	<x:h1 class="title"><x:text value="@load(currentPage.title)"/></x:h1>
	<x:h2 class="subTitle"><x:text value="@load(currentPage.subTitle)"/></x:h2>
	<x:p>
		Founded in 2009, ZK’s Pizza is now one of the largest chains of pizzerias in the country, with more than 150 locations from the East to West.
	</x:p>
</zk>

<zk xmlns:x="xhtml">
	<x:h1 class="title"><x:text value="@load(currentPage.title)"/></x:h1>
	<x:h2 class="subTitle"><x:text value="@load(currentPage.subTitle)"/></x:h2>
	<x:p>
		Find answers to some of the most frequently asked questions about ZK's Pizza.
	</x:p>
</zk>

<zk xmlns:x="xhtml">
	<x:h1 class="title"><x:text value="@load(currentPage.title)"/></x:h1>
	<x:h2 class="subTitle"><x:text value="@load(currentPage.subTitle)"/></x:h2>
	<x:p>
		Here you'll find a selection of dozens of unique and delicious menu items.
	</x:p>
</zk>

<zk xmlns:x="xhtml">
	<x:h1 class="title"><x:text value="@load(currentPage.title)"/></x:h1>
	<x:h2 class="subTitle"><x:text value="@load(currentPage.subTitle)"/></x:h2>
	<x:p>
		Some of the latest news about ZK's Pizza.
	</x:p>
</zk>

<zk xmlns:x="xhtml">
	<x:h1 class="title"><x:text value="@load(currentPage.title)"/></x:h1>
	<x:h2 class="subTitle"><x:text value="@load(currentPage.subTitle)"/></x:h2>

	<x:p>
		A list of "<label value="@load(currentPage.data)"/>" customers who have membership.
	</x:p>

	<listbox status="@ref(currentPage.data eq 'active' ? true : false)">
		<listitem>
			<listcell label="customer 1"/>
			<listcell>
				<checkbox checked="@load(status)"/>
			</listcell>
		</listitem>
		<listitem>
			<listcell label="customer 2"/>
			<listcell>
				<checkbox checked="@load(status)"/>
			</listcell>
		</listitem>
		<listitem>
			<listcell label="customer 3"/>
			<listcell>
				<checkbox checked="@load(status)"/>
			</listcell>
		</listitem>
	</listbox>
</zk>

<zk xmlns:x="xhtml">
	<x:h1 class="title"><x:text value="@load(currentPage.title)"/></x:h1>
	<x:h2 class="subTitle"><x:text value="@load(currentPage.subTitle)"/></x:h2>

	<x:p>
		Orders with status "<label value="@load(currentPage.data)"/>"
	</x:p>

	<listbox status="@ref(currentPage.data)">
		<listitem>
			<listcell label="order 1"/>
			<listcell label="@load(status)"/>
		</listitem>
		<listitem>
			<listcell label="order 2"/>
			<listcell label="@load(status)"/>
		</listitem>
		<listitem>
			<listcell label="order 3"/>
			<listcell label="@load(status)"/>
		</listitem>
		<listitem>
			<listcell label="order 4"/>
			<listcell label="@load(status)"/>
		</listitem>
	</listbox>
</zk>

<zk xmlns:x="xhtml">
	<x:h1 class="title"><x:text value="@load(currentPage.title)"/></x:h1>
	<x:h2 class="subTitle"><x:text value="@load(currentPage.subTitle)"/></x:h2>
	<x:p>
		Don’t miss out on your chance to win a $50 coupon.
	</x:p>
</zk>

<zk xmlns:x="xhtml">
	<x:h1 class="title"><x:text value="@load(currentPage.title)"/></x:h1>
	<x:h2 class="subTitle"><x:text value="@load(currentPage.subTitle)"/></x:h2>
	<x:p>
		Come on down for a day full of fun activities, giveaways and, of course, delicious food!
	</x:p>
</zk>

.horizontal, .vertical {
	min-height: 300px;
	background-color: #EAE7E7;
}
.z-navbar {
	position: absolute;
	background-color: white;
}
.z-navbar-horizontal li {
 	min-width: 145px;
}	
.z-navbar-vertical {
	width: 160px;
	height: 300px;
}	
.z-navbar-vertical.z-navbar-collapsed {
	width: inherit;
}	
.z-navbar-horizontal.z-navbar-collapsed {
	width: 580px;
}
.content {
	padding: 18px 22px;
}
.vertical .content {
	padding-left: 182px;
}
.vertical .content.collapsed {
	padding-left: 75px;
}
.horizontal .content {
	padding-top: 50px;
}
.content .title {
	margin: 0;
}
.content .subTitle {
	margin: 0;
}

package demo.menu.navbar;

import java.util.LinkedHashMap;
import java.util.Map;

import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.Init;

public class NavigationViewModel {
	NavigationPage currentPage;
	private Map<String, Map<String, NavigationPage>> pageMap;
	
	@Init
	public void init() {
		initPageMap();
		currentPage = pageMap.get("ZK's Pizza").get("About Us");
	}

	@Command
	public void navigatePage(@BindingParam("target") NavigationPage targetPage) {
		BindUtils.postNotifyChange(null, null, currentPage, "selected");
		currentPage = targetPage;
		BindUtils.postNotifyChange(null, null, this, "currentPage");
	}
	
	public NavigationPage getCurrentPage() {
		return currentPage;
	}

	public Map<String, Map<String, NavigationPage>> getPageMap() {
		return pageMap;
	}
	
	private void initPageMap() {
		pageMap = new LinkedHashMap<String, Map<String, NavigationPage>>();
		
		addPage("ZK's Pizza", "About Us", "/home/about_us.zul");
		addPage("ZK's Pizza", "Menu", "/home/menu.zul");
		addPage("ZK's Pizza", "FAQ", "/home/faq.zul");
		addPage("ZK's Pizza", "Press", "/home/press.zul");

		addPage("Customers", "Active Members", "/customers/customers.zul", "active");
		addPage("Customers", "Inactive Members", "/customers/customers.zul", "inactive");

		addPage("Orders", "In Preparation", "/orders/orders.zul", "in-preparation");
		addPage("Orders", "Ready for Shipping", "/orders/orders.zul", "ready");
		addPage("Orders", "Shipping", "/orders/orders.zul", "shipping");
		addPage("Orders", "Specified for Later", "/orders/orders.zul", "later");
		
		addPage("Fan Service", "Events", "/fan_service/events.zul");
		addPage("Fan Service", "Promotion", "/fan_service/promotion.zul");
	}

	private void addPage(String title, String subTitle, String includeUri) {
		addPage(title, subTitle, includeUri, null);
	}
	
	private void addPage(String title, String subTitle, String includeUri, String data) {
		String folder = "/widgets/menu/navbar/pages";
		Map<String, NavigationPage> subPageMap = pageMap.get(title);
		if(subPageMap == null) {
			subPageMap = new LinkedHashMap<String, NavigationPage>();
			pageMap.put(title, subPageMap);
		}
		NavigationPage navigationPage = new NavigationPage(title, subTitle,
				folder + includeUri + "?random=" + Math.random(), data) {
			@Override
			public boolean isSelected() {
				return currentPage == this;
			}
		};
		subPageMap.put(subTitle, navigationPage);
	}
}

package demo.menu.navbar;

public abstract class NavigationPage {
	private String title;
	private String includeUri;
	private String subTitle;
	private Object data;
	
	public NavigationPage(String title, String subTitle, String includeUri, Object data) {
		super();
		this.title = title;
		this.subTitle = subTitle;
		this.includeUri = includeUri;
		this.data = data;
	}

	public abstract boolean isSelected();

	public String getTitle() {
		return title;
	}
	public String getSubTitle() {
		return subTitle;
	}
	public String getIncludeUri() {
		return includeUri;
	}
	public Object getData() {
		return data;
	}
}