# TreeView for Navigation

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`](https://www.telerik.com/blazor-ui/documentation/components/treeview/data-binding/overview#treeview-bindings). 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](https://www.meziantou.net/anchor-navigation-in-a-blazor-application.htm) out-of-the-box.

For specific scenarios, use a [Template](https://www.telerik.com/blazor-ui/documentation/components/treeview/templates) to generate the desired links manually (e.g. `NavLink` components) to enable fine-tuning.

> caption TreeView for page navigation

<demo metaUrl="client/treeview/navigation/example-1/" height="450"></demo>

## 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](https://www.telerik.com/blazor-ui/documentation/components/treeview/overview)
* [TreeView Data Binding](https://www.telerik.com/blazor-ui/documentation/components/treeview/data-binding/overview)
* [TreeView Templates](https://www.telerik.com/blazor-ui/documentation/components/treeview/templates)