TreeView for Navigation

Updated on Oct 1, 2026

The TreeView can navigate between different pages in the application.

• Use a Url property in the model, or set the UrlField attribute in a TreeViewBinding. Thus the TreeView will generate navigation links.
• It is possible to add the TreeView to the MainLayout.razor, outside the app @Body.

External links should include a protocol, for example https://.

Blazor doesn't support navigation to page sections out-of-the-box.

For specific scenarios, use a Template to generate the desired links manually (e.g. NavLink components) to enable fine-tuning.

TreeView for page navigation

Example

View Source

Loading ...

Notes

• The UrlField has a default value (Url) and that will be used if present in the model even if you do not define it explicitly.

• The component uses the NavigationManager from the framework to perform the navigation based on the value from the UrlField.

  • If you have a template that adds anchors, or use a click event to navigate the user yourself, this may lead to double navigation and errors, especially if your model has a field called Url. To avoid such problems, either let the Telerik component do the navigation and remove the application-specific code that does it as well, or remove the URL setting (either rename the model field, or point the UrlField to a non-existing field).

See Also

• TreeView Overview
• TreeView Data Binding
• TreeView Templates