TelerikDrawer<TItem>
Represents a Telerik UI for Blazor Drawer component that displays a collapsible side navigation panel which provides seamless access to application sections and navigation items. The component enables responsive navigation patterns by offering both expanded and collapsed states, with optional mini mode for icon-only display. Supports flexible positioning (left or right side), interaction modes (overlay or push), and comprehensive customization through templates and styling events.
Definition
Namespace:Telerik.Blazor.Components
Assembly:Telerik.Blazor.dll
Type Parameters:
TItem
The type of the data model used for drawer navigation items.
Syntax:
public class TelerikDrawer<TItem> : BaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposableInheritance: objectComponentBaseBaseComponentTelerikDrawer<TItem>
Implements:
Inherited Members
Constructors
public TelerikDrawer()Methods
protected override void BuildRenderTree(RenderTreeBuilder __builder)Overrides:
Programmatically collapses the drawer to its hidden or mini mode state with smooth animation. When called, the drawer transitions from expanded to collapsed state, triggering the ExpandedChanged event and updating the UI.
public override void Dispose()Overrides:
Programmatically expands the drawer to its full visible state with smooth animation. The method triggers the ExpandedChanged event and automatically handles animation timing for optimal user experience.
public override Task SetParametersAsync(ParameterView parameters)Overrides:
Toggles the drawer between expanded and collapsed states, providing a convenient single method for state switching.
Properties
Data
IEnumerable<TItem>
Provides the collection of items that populate the drawer's navigation list.
[Parameter]
public IEnumerable<TItem> Data { get; set; }Controls whether the drawer is currently visible (expanded) or hidden (collapsed). Use two-way binding with ExpandedChanged to respond to user interactions that change drawer state. Default value is false.
[Parameter]
public bool Expanded { get; set; }Fires when the drawer's expanded state changes between visible and hidden.
[Parameter]
public EventCallback<bool> ExpandedChanged { get; set; }Specifies the property name in your data model that contains the icon identifier for each drawer item. The icon appears next to the item text and is especially important in MiniMode where only icons are visible when collapsed. Default value is "Icon".
[Parameter]
public string IconField { get; set; }ItemTemplate
RenderFragment<TItem>
Customizes how individual drawer items are displayed while maintaining the default list structure and behavior. Each item in Data is rendered using this template, providing access to the item's properties for custom display logic.. Ignored when Template is provided, as the full template takes precedence over individual item customization.
[Parameter]
public RenderFragment<TItem> ItemTemplate { get; set; }Enables a compact view showing only icons when the drawer is collapsed. Default value is false.
[Parameter]
public bool MiniMode { get; set; }Controls how the drawer interacts with page content when expanding and collapsing. Default value is Overlay.
Fires when each drawer item is being rendered, allowing you to apply custom CSS classes for conditional styling. The event provides DrawerItemRenderEventArgs containing the current item and a Class property for setting custom CSS classes. The custom classes are applied in addition to the default drawer item styling.
[Parameter]
public Action<DrawerItemRenderEventArgs> OnItemRender { get; set; }SelectedItem
TItem
Specifies which item in the drawer is currently selected, typically representing the active page or section. Use two-way binding with SelectedItemChanged to create responsive navigation.
[Parameter]
public TItem SelectedItem { get; set; }Fires when a user clicks on a drawer item, providing the clicked item for navigation handling. The event provides the clicked item object, which you can use to determine the target page or action.
[Parameter]
public EventCallback<TItem> SelectedItemChanged { get; set; }Specifies the property name in your data model that indicates whether an item should be rendered as a visual separator. Default value is "Separator".
[Parameter]
public string SeparatorField { get; set; }Template
RenderFragment<IEnumerable<TItem>>
Provides complete control over the drawer's content rendering, replacing the default item list with custom markup. Takes precedence over ItemTemplate and renders instead of the default item list when provided. Receives the entire Data collection as context, allowing you to implement custom rendering logic, grouping, or filtering.
[Parameter]
public RenderFragment<IEnumerable<TItem>> Template { get; set; }Specifies the property name in your data model that contains the display text for each drawer item. This text appears as the primary label for navigation items and should be descriptive and user-friendly. Default value is "Text".
[Parameter]
public string TextField { get; set; }Specifies the property name in your data model that contains the navigation URL for each drawer item. Default value is "Url".
[Parameter]
public string UrlField { get; set; }