Customize the Navigation widget

To edit a widget template, perform the following:

1. Add the Navigation widget on the page and click its Edit button.
2. Select the template that you want to modify.
3. Click Edit Selected Template.
   The Edit Template dialog appears. 

Some of these templates by default use our Kendo controls (all Kendo UI is included in the Sitefinity CMS distribution), so you can customize them using the options, methods, and events from the Kendo API. For more information, see https://docs.telerik.com/kendo-ui/api/web/menu and https://docs.telerik.com/kendo-ui/api/web/treeview. 

For example, the Tree (vertical with sub-pages) template uses the Kendo TreeView control and the Horizontal with dropdown menus template uses the Kendo Menu control. 

Following is an example of how to customize the template, so that the navigation nodes expand on the initial loading. 

Using the <script> tag

You do this with a <script> tag directly in the template. 

1. Modify the <script> tag in the following way:
2. Click Save Changes button. 
   You return to the Edit dialog.
3. Click Save button.

When you publish the page, the tree is rendered in collapsed state. 

Using external JavaScript file

You can achieve the same functionality by moving the above mentioned customization in external JavaScript file. We recommend using this approach, because this way the browser caches the external scripts.

1. Delete the <script> tag in the bottom of the default template.
   
2. Create new JavaScript file inside the SitefinityWebApp project with the following content:
   
3. Add it to the Tree(Vertical With Sub-Levels) template below the <ResourceLinks> section, by entering the following:
   <script src="/YourScriptName.js" > </script>
   
4. Click Save Changes button. 
   You return to the Edit dialog.
5. Click Save button.

The following example shows how to customize the navigation to collapse all nodes, except the currently open one.

1. Open the Tree (vertical with sub-pevels) widget template.
2. At the end of the template, delete the <script>...</script> section.
3. At the same place, insert the following:
4. Save your changes.

Follow this example, if you want to have a navigation that is displaying in an accordion style provided by the Kendo PanelBar. For more information, see https://docs.telerik.com/kendo-ui/api/web/panelbar.

1. In the initialization of the kendoTreeView in the above example you can replace kendoTreeView with kendoPanelBar like in the following example:
   
2. Click Save Changes button.
   You return to the Edit dialog.
3. Click Save button.

Follow this procedure, if you want to modify the default behavior of the menu template in order to open the parent pages on click and expand the menu on hover. 

Perform the following:

1. Open the Horizontal with dropdown menus widget template.
2. Scroll to the bottom of the template, find the following line, and change it to false:
   var whetherToOpenOnClick = true; 
3. Click Save Changes.
   You return to the Edit dialog.
4. Click Save button.

Follow this procedure, if you want to use RadControls with the Navigation widget. This example uses RadMenu instead of the kendoMenu. 

Perform the following:

1. Open the template for editing.
2. Replace the Navigation Container with the RadMenu control and set DataSourceId equal to the id of the SitefinitySiteMapDataSource.
   For that purpose you must register the Telerik.Web.UI namespace in the following way:
   
3. Click Save Changes button. 
   You return to the Edit dialog.
4. Click Save button.