Prevent Drawer from collapsing on item click

Updated on Apr 22, 2026

Environment

Product

Drawer for Blazor

Description

I would like to prevent the Drawer from collapsing when an item from the navigation is clicked and switch between the collapsed and expanded state by the click of a button.

Solution

1. Add a Button and update the value of the Expanded parameter in the Button's OnClick event handler.
2. Handle the ExpandedChanged event of the Drawer, but don't update the Expanded parameter value in the handler. This prevents the Drawer from collapsing on item selection.

Stop the Drawer from collapsing on item click

<TelerikDrawer Expanded="@DrawerExpanded"
               ExpandedChanged="@DrawerExpandedChanged"
               Data="Data"
               Mode="@DrawerMode.Push"
               MiniMode="true"
               @bind-SelectedItem="@SelectedItem">
    <DrawerContent>
        <TelerikButton OnClick="@ToggleDrawer" Icon="@SvgIcon.Menu" />
        <p>@SelectedItem?.Text</p>
    </DrawerContent>
</TelerikDrawer>

@code {
    public DrawerItem SelectedItem { get; set; }
    public bool DrawerExpanded { get; set; } = true;

    public IEnumerable<DrawerItem> Data { get; set; } =
    new List<DrawerItem>
    {
        new DrawerItem { Text = "Inbox", Icon = SvgIcon.Inbox },
        new DrawerItem { Text = "Notifications", Icon = SvgIcon.Bell },
        new DrawerItem { Text = "Calendar", Icon = SvgIcon.Calendar },
        new DrawerItem { Text = "Attachments", Icon = SvgIcon.EnvelopeLink },
        new DrawerItem { Text = "Favourites", Icon = SvgIcon.StarOutline }
    };

    private void ToggleDrawer()
    {
        DrawerExpanded = !DrawerExpanded;
    }

    private void DrawerExpandedChanged(bool newExpanded)
    {
        // Do not modify the DrawerExpanded value here.
    }

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

See Also

• Click in dropdown closes the Drawer