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.

Telerik UI for Blazor Ninja image

The Drawer component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day 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. *@

<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())"
               Icon="@SvgIcon.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 = SvgIcon.Plus },
            new DrawerItem { Text = "FetchData", Icon = SvgIcon.GridLayout },
            };

    public class DrawerItem
    {
        public string Text { get; set; }
        public ISvgIcon 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.

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
(Start)
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="@SvgIcon.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 = SvgIcon.Plus },
            new DrawerItem { Text = "FetchData", Icon = SvgIcon.GridLayout },
            };

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

Next Steps

See Also

In this article