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 100 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

1. Add the TelerikDrawer tag to a Razor file.

2. Populate its Data property with the collection of items (IEnumerable<T>) for the user to see.

3. Set the SelectedItem parameter to a T object. It supports one-way and two-way binding.

4. Place the content of the current page in the <DrawerContent> tag.

5. Set the @ref parameter to obtain reference to the component instance. Use this instance to toggle the Drawer.

6. 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.

Navigation

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.

Read more about the Blazor Drawer navigation.

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.

Selection

The Drawer component has an option to pre-select the desired item, then use the highlighted item to load/generate content, or denote the current page. Read more about the Blazor Drawer selection.

Templates

The Blazor Drawer allows full control of the item rendering and layout. The component has an ItemTemplate and Template. Read more about the Blazor Drawer templates.

Drawer Icons

To illustrate the purpose of each Drawer item, the Blazor Drawer has the option to add images, icon classes, or font icons. Read more about the Blazor Drawer icons.

Refresh Data

The Drawer can refresh its interface, when the data items change. Read more about the Blazor Drawer data refresh.

Events

The Blazor Drawer fires select and expand events. Handle those events to respond to user actions. Read more about the Blazor Drawer events.

Drawer Parameters

The Blazor Drawer provides various parameters to configure the component. Also check the Drawer public API.

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; }
    }
}

Next Steps

• Bind the Drawer to Data

• Define Drawer Templates

• Use the Drawer for Navigation

• Handle the Drawer Events

See Also

• Live Drawer Demos
• Drawer API Reference