From Documentation

Jump to: navigation, search





Contents

Navbar

  • Demonstration:
  • Java API: Navbar
  • JavaScript API: Navbar
  • Style Guide:
  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

Employment/Purpose

Provide a roadmap to help user navigate through website. It's a container that usually contains nav elements.

Example

ZKComRef Nav.png

<navbar orient="vertical" width="200px">
	<navitem label="Home" iconSclass="z-icon-home" />
	<nav label="Get Started" iconSclass="z-icon-th-list" badgeText="3">
		<navitem label="Step One" />
		<navitem label="Step Two" />
		<navitem label="Step Three" />
	</nav>
	<navitem label="About" iconSclass="z-icon-flag" />
	<navitem label="Contact" iconSclass="z-icon-envelope"/>
</navbar>

Properties

Orient

A navbar could be placed in a vertical or horizontal orientation, the orient attribute decides.

Orient
Snapshot
horizontal
ZKComRef Nav hor.png
vertical
ZKComRef Nav.png

Collapsed

A navbar could be collapsed, the collapsed attribute decides.

Collapsed
Orient
Snapshot
true
horizontal
ZKComRef Nav Hor Cld.png
false
horizontal
ZKComRef Nav Hor No.png
true
vertical
ZKComRef Nav Ver Cld.png
false
vertical
ZKComRef Nav Ver No.png

Supported Events

Name
Event Type
onSelect
Event: SelectEvent

Notifies one that the user has selected a navitem in the navbar.

Supported Children

* Nav,  Navitem, Navseparator

Use Cases

Version Description Example Location
     

Version History

Last Update : 2013/10/23


Version Date Content
7.0.0 August, 2013 Navbar was introduced.




Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.