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 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
Add the
TelerikDrawertag to a Razor file.Populate its
Dataproperty with the collection of items (IEnumerable<T>) for the user to see.Set the
SelectedItemparameter to aTobject. It supports one-way and two-way binding.Place the content of the current page in the
<DrawerContent>tag.Set the
@refparameter 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. *@
<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.
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
UrlFieldin 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.,
NavLinkcomponents) 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; }
}
}