Introduction

Navigation is a key component in a website,  a good navigation design can greatly improve a user’s experience. It not only presents the website’s information briefly, but also helps users locate and link to other pages in the website. Previously in ZK, we provide components like menu, tab, listbox which can be used for navigation purposes, but they require some sort of effort to add a few customizations to meet requirements. In the upcoming ZK 7, however, we are pleased to introduce a new set of navigation components. Developers are now able to design excellent navigation menus and sitemaps more easily and rapidly by using the new navigation components.

ZK 7′s demo is available here

Navigation components of ZK 7 consists of the following features:

  • Highlight current tab - highlights the tab which  the user is on
  • Sub-navigation - in order to reduce the website’s complexity, a child navigation bar can be used to categorize and simplify directories. Users can expand and collapse a sub-navigation to show or hide the inside links.
  • Display the number of item that is inside a sub-navigation - optional to choose whether or not to show the number of the links/items inside the sub-navigation.
  • Support both vertical and horizontal mode – navigation bar can be placed in a vertical or horizontal orientation.
  • Add icons and images to the tabs easily - developers can integrate icons and images to the navigation link easily.

Live Demo

In the demo we will use a todo list as an example to show how the navigation component works.

Get Adobe Flash player

Please note that images used in the demo are  borrowed from http://www.morguefile.com (License: morgueFile license)

Implementation

The implementation of these navigation components are easy requiring only simple ZUL code snippets as shown below:

<navbar id="sidebar" orient="vertical"> 
  <navitem label="Inbox" iconSclass="z-icon-inbox"/>
  <navitem label="Create Task" iconSclass="z-icon-pencil"/>
  <nav label="Next Actions" iconSclass="z-icon-th-list" detailed="true">
    <navitem label="Rescue the Baby" iconSclass="z-icon-star"/>
    <navitem label="Play Darts" />
... ...

navbar creates a navigation bar which contains nav or navitemnav is a sub-navigation bar while navitem represents a link. The entire structure is very similar to the html ul and li tags. All Developers have to do is to arrange the navigation structure and links that it contains, and it would turn out as a well-designed navigation bar.

ZK 7 Preview is now available for download here.
Please note that this component is EE only, make sure you download the EE evaluation copy to try it out.

Resource

  • Download demo here.
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

16 Responses to “ZK 7 Navigation Component: Your Website’s Digital Roadmap”

  1. Arturo says:

    I tried ZK 7, but when I run mu index.zul I have this error :

    Component definition not found: navbar in [LanguageDefinition: xul/html]

  2. Arturo says:

    I installed ZK 7 Preview , but I receive an error : naf bar component is not found in components definition

  3. Raymond Chao says:

    Hi Arturo,
    Are you using ZK EE? Navbar is an EE component, if not, you can download ZK 7 EE evaluation copy from the download page.

  4. Why is navbar just in the EE edition? Navbar is a common component in today’s web applications. Especially when a complex pull down menu component is in the CE edition.

  5. William says:

    Great work with ZK 7, congratulations! I must agree with Ondrej, it’s odd that you guys chose to put a core component as navbar in EE edition only. Considering that EE is too expensive for most developers. At least add it to PE that is more affordable. My 2c

  6. Tim says:

    Hey everyone,

    Thanks a lot for your great feedback, we are really pleased to hear that you are using ZK and liking the theme improvements.

    With regard to the Navigation Component, again it comes down to a balance (time & money) and a trade-off. We will continue to think about the balance between the versions. Currently it is possible to implement something similar, for this example you can check our ZK Essentials application which has an example of doing it, it is rather easy.

  7. Arturo says:

    I’m not agree. Navbar should be used not only ZK EE…..

  8. Angel says:

    pass navbar to CE. Please!!!

  9. autio says:

    pass navbar to zk Framwork .Please

  10. diego says:

    navbar to PE!

  11. Vincent says:

    zk EE evaluation version 7.0.0.FL.20131017
    I got error message like below:
    Method setDetailed not found for class org.zkoss.zkmax.zul.Nav

  12. Vincent says:

    zk EE evaluation version 7.0.0.FL.20131017
    I got error message like below:
    Method setDetailed not found for class org.zkoss.zkmax.zul.Nav

    Finally i found you introduce the bug in version 7.0.0.FL.20130925

  13. Andreas Piening says:

    I tried nearly two hours figuring out why I can’t run the “applications 2″ demo due to the missing navbar component. I didn’t get to the point where I even thought about the possibility that this is a enterprise-only component since I stumbled upon this page. Honestly it still sounds like a bad joke to me.
    I totally understand that ZK couldn’t be completely free, and as a professional developer the professional version is affordable in my opinion. However, the EE version isn’t even tagged with a price, a quote needs to be requested.
    I think the demo code should be executable for all users, and that includes professional and community users.
    If the bootstrap stuff is an additional payed feature, it might harm the usage and development and support from the community but it would be ok. But promoting the bootstrap theming support as a global feature and putting essential features in EE should be reconsidered.

    However, congratulations on the bootstrap theming stuff. It is not yet seriously usable to me (as a non EE developer) and therefore I haven’t tested it that much, but the theme and it’s features are awesome! This shifts ZK even more as the administration backand programming framework of choice!

  14. Fony Harisman says:

    hi.. i try using navbar, and its very awesome, and run normally in my PC, but not if I run it on mobile device, the event “onclick” does not work, anyone can help me ? thanks…

  15. Bhushan says:

    navbar should be available in ZK CE.

Leave a Reply