• Demonstration:
  • Java API: Navbar
  • JavaScript API: Navbar
  • Style Guide:
CE
PE
EE

Employment/Purpose

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

Example

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

Collapsed

A navbar can be collapsed, the collapsed attribute decides.

Collapsed Orient Snapshot
true horizontal
false horizontal
true vertical
false vertical

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: org.zkoss.zk.ui.event.SelectEvent Notifies one that the user has selected a navitem in the navbar. |

Supported Children

* Nav, Navitem, Navseparator

Version History

Version Date Content
7.0.0 August, 2013 Navbar was introduced.