Iterate Collections

We can use the <forEach> tag to iterate over a collection of objects (notice the capitalized 'E').

Specify the collection by using the items attribute, and you can access the current item through a variable named specified at the var attribute. Also, we can use the following attributes - begin, end, and step to specify the iteration start point, end point, and iteration step.

Work with UI components

Starting from the basics, we can render the list of menu node with <forEach>and <navitem>. The <forEach> can iterate over a collection of objects. Specify the collection by the items attribute and access the current item through a variable named each. Or you can define the current item variable by the var attribute e.g. if you write <forEach items="@load(menuItems)" var="menu"> then you should use menu in a data binding expression like <navitem label="@load(menu.label)">.

<navbar id="navbar" orient="horizontal" collapsed="false">
    <forEach items="@load(menuItems)">
        <navitem label="@load(each.label)"
            iconSclass="@load(each.iconSclass)">
        </navitem>
    </forEach>
</navbar>

But this way only renders each menu node as a <navitem>. We need to render these menu nodes with a sub-menu as a <nav>.