Blazor Drawer Overview

The Blazor Drawer component is an interactive side panel for navigating in responsive web applications. It can be always visible, or expanded and collapsed. The Drawer allows switching the content of different sections on the page. You can customize its templates, expand modes, minimize behavior and also respond to events.

The Drawer component is part of Telerik UI for Blazor, a professional grade UI library with 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Creating Blazor Drawer

Add the TelerikDrawer tag to a Razor file.
Populate its Data property with the collection of items (IEnumerable<T>) for the user to see.
Set the SelectedItem parameter to a T object. It supports one-way and two-way binding.
Place the content of the current page in the <DrawerContent> tag.
Set the @ref parameter to obtain reference to the component instance. Use this instance to toggle the Drawer.
Add a button inside the content to toggle the Drawer.

Basic configuration of the Drawer.

@* This example shows the basic configuration of the Drawer and how to expand or collapse a Drawer with a click of a button. *@

<TelerikDrawer Data="@Data"
               @ref="@DrawerRef"
               @bind-SelectedItem="@SelectedItem">
    <DrawerContent>
        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu">Toggle drawer</TelerikButton>

        @* Place your contents here - it can be as simple as text, it can be conditional components or components that
            take the selected item as a parameter, or even the @Body tag for navigation if you place the
            drawer high enough in the project layout hierarchy *@
        <div class="m-5">
            Selected Item: @SelectedItem?.Text
        </div>
    </DrawerContent>
</TelerikDrawer>

@code {
    TelerikDrawer<DrawerItem> DrawerRef { get; set; }
    DrawerItem SelectedItem { get; set; }
    IEnumerable<DrawerItem> Data { get; set; } =
        new List<DrawerItem>
        {
            new DrawerItem { Text = "Counter", Icon = "plus"},
            new DrawerItem { Text = "FetchData", Icon = "grid-layout"},
        };

    public class DrawerItem
    {
        public string Text { get; set; }
        public string Icon { get; set; }
    }
}

Data Binding

The Blazor Drawer requires a data source so that it can display items to the user. To provide a data source, use the Data property. Read more about the Blazor Drawer data binding.

A Drawer is often used to list pages, views, or sections in an application so the user can navigate between them. To do that with a Drawer, there are two options:

Use the built-in UrlField in the bound data to populate the URLs in the anchors that the Drawer will generate if you provide a URL for the given item.
Use a Template to generate the desired links (e.g., NavLink components) with your own code to enable fine-tuning.

Modes

The Blazor Drawer provides Push and Overlay modes of expansion. They determine if the Drawer items push the other content to the side, or cover it temporarily. Read more about the Blazor Drawer modes.

Mini View

By default, the Drawer is not visible when collapsed. To leave a small hint for the user, the Drawer provides a Mini View, so that users can navigate with just a single action, without the need to expand the Drawer items. Read more about the Blazor Drawer mini view.

Parameter	Type and Default Value	Description
`Class`	`string`	Renders a custom CSS class to the `<div class="k-drawer-container">` element.
`Expanded`	`bool`	Specifies whether the Drawer is expanded or collapsed. If this parameter is used to expand or collapse the component the animations will not be available. To use animations you have to use the Drawer's Methods. It is possible, however, to use the value to implement custom layouts in the drawer templates or in your own layout.
`Mode`	`DrawerMode` enum (`Overlay`)	Controls whether the Drawer is in `Push` or `Overlay` mode. Read more about the supported modes.
`MiniMode`	`bool`	Controls whether there is mini view when the Drawer is collapsed.
`Position`	`DrawerPosition` enum (`Left`)	Determines on which side of the `DrawerContent` the item list will render.
`Width`	`string` (`240px`)	The width of the Drawer when expanded.

Drawer Reference and Methods

The Drawer methods are accessible through it's reference. These methods change the value of the Expanded parameter.

Method	Description
`ExpandAsync`	Expands the Drawer.
`CollapseAsync`	Collapses the Drawer.
`ToggleAsync`	Expands or collapses the Drawer, depending on the current state.

Get a reference to the drawer and use its methods

@* The drawer is a generic components and its reference type depends on the type of the model it is bound to. *@

<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())"
               Icon="menu">
    Toggle drawer
</TelerikButton>

<TelerikDrawer Data="@Data" Mode="@DrawerMode.Push"
               @ref="@DrawerRef">
    <DrawerContent>lorem ipsum</DrawerContent>
</TelerikDrawer>

@code {
    Telerik.Blazor.Components.TelerikDrawer<DrawerItem> DrawerRef { get; set; }

    IEnumerable<DrawerItem> Data { get; set; } =
        new List<DrawerItem>
        {
            new DrawerItem { Text = "Counter", Icon = "plus"},
            new DrawerItem { Text = "FetchData", Icon = "grid-layout"},
        };

    public class DrawerItem
    {
        public string Text { get; set; }
        public string Icon { get; set; }
    }
}

Blazor Drawer Overview

Creating Blazor Drawer

Data Binding

Navigation

Modes

Mini View

Selection

Templates

Drawer Icons

Refresh Data

Events

Drawer Parameters

Drawer Reference and Methods

Next Steps

See Also

Getting Started

Community

Support Resources

Sample Applications