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.
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.
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)
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.