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:

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?