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 MainLayot.razor of your app.
  • Put the @Body tag in the <Content> tag of the drawer.
  • Provide a collection of models that describe the pages you want the user to navigate to.

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">
        <Content>
            @Body
        </Content>
    </TelerikDrawer>

</TelerikRootComponent>

@code{ 
    List<DrawerItem> NavigablePages { get; set; } =
        new List<DrawerItem>
        {
            new DrawerItem { Text = "Home", Url = "/", Icon = "home" },
            new DrawerItem { IsSeparator = true },
            new DrawerItem { Text = "Counter", Url = "counter", Icon = IconName.PlusOutline },
            new DrawerItem { Text = "FetchData", Url = "fetchdata", Icon = IconName.Grid }
        };

    public class DrawerItem
    {
        public string Text { get; set; }
        public string Url { get; set; }
        public string Icon { get; set; }
        public bool IsSeparator { get; set; }
    }
}

See Also

In this article
Not finding the help you need? Improve this article