Drawer for Navigation

The Drawer is a different kind of a menu 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.

To use the Drawer for navigating between pages:

• Add the Drawer to the MainLayout.razor of your app.

• Put the @Body tag in the <DrawerContent> 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).

Use the Drawer for Navigation in MainLayout.razor

@* This is a very basic layout to showcase the concept. You may want to add a header, footer, collapse/expand button and add desired heights to the layout and drawer *@ @inherits LayoutComponentBase <TelerikRootComponent> <TelerikDrawer Data="@NavigablePages" Expanded="true" MiniMode="true" Mode="@DrawerMode.Push"> <DrawerContent> @Body </DrawerContent> </TelerikDrawer> </TelerikRootComponent> @code{ List<DrawerItem> NavigablePages { get; set; } = new List<DrawerItem> { new DrawerItem { Text = "Home", Url = "/", Icon = SvgIcon.Home }, new DrawerItem { Separator = true }, new DrawerItem { Text = "Counter", Url = "counter", Icon = SvgIcon.PlusOutline }, new DrawerItem { Text = "FetchData", Url = "fetchdata", Icon = SvgIcon.Grid } }; public class DrawerItem { public string Text { get; set; } public string Url { get; set; } public ISvgIcon Icon { get; set; } public bool Separator { get; set; } } }

Additional Examples

• A GitHub sample project that showcases Drawer as side navigation.
• KB article on how to select a Drawer item when the page loads.

See Also

• Drawer Data Binding
• Drawer Templates
• Drawer Demos