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 can 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

Autoclose

[ since 8.0.4 ]

By default only a single nav-element is open at any time - automatically closing other nav-elements which are not on the current open path. This behavior can be disabled setting autoclose="false", which keeps nav elements open until they are clicked again by the user.

	<navbar orient="vertical" autoclose="false">
		<nav label="nav 1">
			<navitem label="nav 1.1"/>
			<navitem label="nav 1.2"/>
		</nav>
		<nav label="nav 2">
			<navitem label="nav 2.1"/>
			<navitem label="nav 2.2"/>
		</nav>
	</navbar>

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 : 2018/12/28


Version Date Content
7.0.0 August, 2013 Navbar was introduced.




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