# Drawer for Navigation The Drawer is a different kind of a [menu](https://www.telerik.com/blazor-ui/documentation/components/menu/overview) that is commonly used to navigate between pages in the app - it can generate the needed links for you through its `UrlField` when [data binding](https://www.telerik.com/blazor-ui/documentation/components/drawer/data-bind). To use the Drawer for navigating between pages: * Add the Drawer to the `MainLayout.razor` of your app. * Put the `@Body` tag in the `` tag of the drawer. * Provide a collection of models that describe the pages you want the user to navigate to. * 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). > caption Use the Drawer for Navigation in `MainLayout.razor`
## Additional Examples * A GitHub sample project that showcases [Drawer as side navigation](https://github.com/telerik/blazor-ui/tree/master/drawer/sidenav). * KB article on [how to select a Drawer item when the page loads](https://www.telerik.com/blazor-ui/documentation/knowledge-base/drawer-sync-selected-item). ## See Also * [Drawer Data Binding](https://www.telerik.com/blazor-ui/documentation/components/drawer/data-bind) * [Drawer Templates](https://www.telerik.com/blazor-ui/documentation/components/drawer/templates) * [Drawer Demos](https://demos.telerik.com/blazor-ui/drawer/overview)