Navigation is a key component in a website, a good navigation design can greatly improve a user’s experience. Check out the best web hosting for wordpress. 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. Some of the website development services enhance consumer experience by adding advance features like importing and exporting presentation with the help of web applications.
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.
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 creates a navigation bar which contains nav or navitem – nav 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.
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.
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
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.
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!
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…
I may just be thick headed but I can’t see how you can add pages to the nav bar. That is the only thing keneipg me from using your template for my blog. It’s lovely and would work well for me I think.Hopefully you can let me know what I am missing.Thanks.
I tried ZK 7, but when I run mu index.zul I have this error :
Component definition not found: navbar in [LanguageDefinition: xul/html]
I installed ZK 7 Preview , but I receive an error : naf bar component is not found in components definition
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.
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.
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
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.
I’m not agree. Navbar should be used not only ZK EE…..
pass navbar to CE. Please!!!
pass navbar to zk Framwork .Please
navbar to PE!
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
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
Please use setBadgeText() instead –
http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Nav.html#setBadgeText(java.lang.String)
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!
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…
navbar should be available in ZK CE.
whyyy ZK EE only ????????,
I may just be thick headed but I can’t see how you can add pages to the nav bar. That is the only thing keneipg me from using your template for my blog. It’s lovely and would work well for me I think.Hopefully you can let me know what I am missing.Thanks.