Using NavigationModel

Since 8.6.0

By the help of NavigationModel and <apply>, we can construct a multi-level navigation and load template of each level to be applied with ease.

Construct a Model

Create a navigation object

public class MyObject {
    private String name;
    private String description;

    public MyObject(String name, String description) { = name;
        this.description = description;
    // getters and setters are omitted

Create a NavigationModel in the ViewModel

public class MyVM {
    private NavigationModel<MyObject> navModel = new NavigationModel<MyObject>();

    public MyVM() {
        navModel.put("AAA", new MyObject("AAA", "desc 1"));
        navModel.put("AAA/AAA1", new MyObject("AAA1", "desc 2"));
        navModel.put("BBB", new MyObject("BBB", "desc 3"));
        navModel.put("BBB/BBB1", new MyObject("BBB1", "desc 4"));
        navModel.put("CCC", new MyObject("CCC", "desc 5"));

    public NavigationModel<MyObject> getNavModel() {
        return navModel;
  • We declared a NavigationModel for storing many MyObject.
  • The path string AAA/AAA1 means level 1 is AAA and level 2 is AAA1.

Nested level in ZUML

<apply level="@load(vm.navModel.root)">
    // do some level 1 thing...
    <apply level2="@load(level.child)">
        // do some level 2 thing...

Render a level

In each level, we defined different properties like level or level2 to store the NavigationLevel object. So we can get the current navigated object by calling getCurrent().


<apply level="@load(vm.navModel.root)">
    Name: <label value="@load(" />

Navigate a level

You can bind a @command which is calling navigateTo for navigating items.


<a label="Navigate to BBB"
   onClick="@command('navTo', level=level, key='BBB')" />


public void navTo(@BindingParam("level") NavigationLevel level,
                  @BindingParam("key") String key) {

NavigationModel also provides the method for navigating many levels at once, navigateToByPath.

public void navByPath(@BindingParam("path") String path) {

Iterate a level

To list all items in a level, use getItems() or getItemIterator() to a list of Pair objects which x is key and y is value.


<forEach items="@load(level.items)">
    <a label="@init(each.x)"
       onClick="@command('navTo', level=level, key=self.label)" />