Set the levels of the Navigation widget

Use the following examples to set the depth of the navigation. You modify the levels of navigation nodes that are displayed by editing the respective navigation widget template.

To open a template for editing, first select the respective template in the Navigation widget, then click Edit template button.

Every level of nodes is rendered with its NavigationTemplate and its child nodes inside the <ul> tag with id childNodesContainer. 

The following example shows the bottom part of the Tree (vertical with sub-pages) widget template:

To show or display the child nodes of a node, you add or delete <ul runat="server" id="childNodesContainer"></ul> from its NavigationContainer.

In the following example, another NavigationContainer is added for the first level of nodes, but it does not contain the childNodesContainer, so that no child nodes will be rendered under the first level:

The following example shows the bottom part of the Sitemap in rows widget template:

The top level nodes have childNodesContainer, so that their child nodes are displayed, but the first level nodes do not have this element, so no second level node are rendered.

To add a second level of nodes, add <ul runat="server" id="childNodesContainer"></ul> under the NavigationTemplate for level 1.

And then add a NavigationTemplate for the second level of nodes that does not have childNodesContainer: