# Menu for Navigation

The Menu can be used to navigate between different pages in the application. It can generate the needed links for you through its `UrlField` when [data binding](https://www.telerik.com/blazor-ui/documentation/components/menu/data-binding/overview).

## Basics

To use the Blazor Menu for navigating between pages:

* Add the Menu to your application.
  * You may want to add it in the `MainLayout.razor` outside of the `@Body`, for example, in the header section of your app.
* Provide a collection of models that describe the pages you want the user to navigate to.
* Set the `Url` property of the Menu model to the desired destination page. Alternatively, use a different property and set it to the `UrlField` parameter of the Blazor Menu component.

## Example

> caption Use the Menu to navigate between pages

<demo metaUrl="client/menu/navigation/example-1/" height="320"></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

* [Menu Overview](https://www.telerik.com/blazor-ui/documentation/components/menu/overview)
* [Menu Data Binding](https://www.telerik.com/blazor-ui/documentation/components/menu/data-binding/overview)
* [Menu Templates](https://www.telerik.com/blazor-ui/documentation/components/menu/templates)