Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Drawer

If you use two-way binding @bind-Open="..." you can toggle the drawer and it will close itself on navigation. If you set its Open parameter without two-way binding you effectively force it to stay open or closed depending on the provided value.

Common pitfall: use @bind-Open instead of Open for auto-closing to work.

See Drawer API for parameter documentation.

Temporary drawer

Temporary drawers can be opened temporary above all other content until a section is selected or clicked on an overlay.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.Left))">Left</MudButton>
<MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.Right))">Right</MudButton>
<MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.Top))">Top</MudButton>
<MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.Bottom))">Bottom</MudButton>

<MudDrawer @bind-Open="@open" Anchor="@anchor" Elevation="1" Variant="@DrawerVariant.Temporary">
    <MudDrawerHeader>
        <MudText Typo="Typo.h6">My App</MudText>
    </MudDrawerHeader>
    <MudNavMenu>
        <MudNavLink Match="NavLinkMatch.All">Store</MudNavLink>
        <MudNavLink Match="NavLinkMatch.All">Library</MudNavLink>
        <MudNavLink Match="NavLinkMatch.All">Community</MudNavLink>
    </MudNavMenu>
</MudDrawer>
@code{ 
    bool open;
    Anchor anchor;
    
    void OpenDrawer(Anchor anchor)
    {
        open = true;
        this.anchor = anchor;
    }
}

Hide overlay

With parameter DisableOverlay overlay can be turned off for responsive and temporary drawers.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(() => ToggleDrawer())">Toggle drawer</MudButton>

<MudDrawer @bind-Open="@open" DisableOverlay="true" Elevation="1" Variant="@DrawerVariant.Temporary">
    <MudDrawerHeader>
        <MudText Typo="Typo.h6">My App</MudText>
    </MudDrawerHeader>
    <MudNavMenu>
        <MudNavLink Match="NavLinkMatch.All">Store</MudNavLink>
        <MudNavLink Match="NavLinkMatch.All">Library</MudNavLink>
        <MudNavLink Match="NavLinkMatch.All">Community</MudNavLink>
    </MudNavMenu>
</MudDrawer>
@code{ 
    bool open;
    
    void ToggleDrawer()
    {
        open = !open;
    }
}

Persistent drawer

Persistent drawer is outside of its container, when opens it forces other contents to change their size. Persistent drawer will be opened until the Open parameter is not changed.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudPaper Height="200px" Style="overflow:hidden; position:relative;">
    <MudDrawerContainer Class="mud-height-full">
        <MudDrawer @bind-Open="@open" Elevation="0" Variant="@DrawerVariant.Persistent" Color="Color.Primary">
            <MudDrawerHeader>
                <MudText Typo="Typo.h6">My App</MudText>
            </MudDrawerHeader>
            <MudNavMenu>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.Dashboard" IconColor="Color.Inherit">Dashboard</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.LocalLibrary" IconColor="Color.Inherit">Library</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.People" IconColor="Color.Inherit">Community</MudNavLink>
            </MudNavMenu>
        </MudDrawer>
        <div class="d-flex justify-center align-center mud-height-full">
            <MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="@TogglDrawer">Persistent drawer</MudButton>
        </div>
    </MudDrawerContainer>
</MudPaper>
@code
{
    bool open = false;

    void TogglDrawer()
    {
        open = !open;
    }
}

Anchor drawer

With the Anchor property you can set the drawer to left or right. The default mode is left. This example uses persistent drawers.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudPaper Height="200px" Class="mud-theme-primary" Style="overflow:hidden; position:relative;">
    <MudDrawerContainer Class="mud-height-full">
        <MudDrawer @bind-Open="@openLeft" Anchor="Anchor.Left" Elevation="0" Variant="@DrawerVariant.Persistent">
            <MudDrawerHeader>
                <MudText Typo="Typo.h6">My App</MudText>
            </MudDrawerHeader>
            <MudNavMenu>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.Store">Store</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.LocalLibrary">Library</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.Forum">Community</MudNavLink>
            </MudNavMenu>
        </MudDrawer>
        <MudDrawer @bind-Open="@openRight" Fixed="false" Anchor="Anchor.Right" Elevation="0" Variant="@DrawerVariant.Persistent">
            <MudDrawerHeader>
                <MudText Typo="Typo.h6">Settings</MudText>
            </MudDrawerHeader>
            <MudNavMenu>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.AccountBox">Profile</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.ShoppingCart">Orders</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.History">Order History</MudNavLink>
            </MudNavMenu>
        </MudDrawer>
        <div class="d-flex justify-center align-center mud-height-full">
            <MudButton Color="Color.Inherit" OnClick="@ToggleLeftDrawer" StartIcon="@Icons.Filled.West" Class="mx-2">Toggle left</MudButton>
            <MudButton Color="Color.Inherit" OnClick="@ToggleRightDrawer" EndIcon="@Icons.Filled.East" Class="mx-2">Toggle right</MudButton>
        </div>
    </MudDrawerContainer>
</MudPaper>
@code
{
    bool openLeft = false;            
    bool openRight = false;

    void ToggleLeftDrawer()
    {
        openLeft = !openLeft;
    }

    void ToggleRightDrawer()
    {
        openRight = !openRight;
    }
}

Responsive drawer

Responsive drawers are behaves persistent on wider screens and temporary on smaller ones. Opened drawer closes automatically when window size becomes small, and opens after orginal state has been restored.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudLayout>
    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@ToggleDrawer" />
        <MudAppBarSpacer />
        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/Garderoben/MudBlazor" Target="_blank" />
    </MudAppBar>
    <MudDrawer @bind-Open="@open" Elevation="1">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">My App</MudText>
        </MudDrawerHeader>
        <MudNavMenu>
            <MudNavLink Match="NavLinkMatch.All">Store</MudNavLink>
            <MudNavLink Match="NavLinkMatch.All">Library</MudNavLink>
            <MudNavLink Match="NavLinkMatch.All">Community</MudNavLink>
        </MudNavMenu>
    </MudDrawer>
    <MudMainContent Class="pt-16 px-16">
        <MudContainer Class="mt-6">
            <MudAlert Severity="Severity.Success" Class="mt-16">Text inside MudContainer</MudAlert>
        </MudContainer>
    </MudMainContent>
</MudLayout>
@code{
    bool open = false;

    void ToggleDrawer()
    {
        open = !open;
    }
}

Clipping

A drawer with ClipMode="Docked" or ClipMode="Always" will not push the AppBar to the side when opening. This parameter is evaluated only when drawers are used inside a MudLayout directly. This example shows how a different options work with a responsive drawer. Change the size of the window to test all possiblities.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudLayout>
    <MudAppBar Elevation="1" Dense="@dense">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@ToggleDrawer" />
        <MudAppBarSpacer />
        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/Garderoben/MudBlazor" Target="_blank" />
    </MudAppBar>
    <MudDrawer @bind-Open="@open" ClipMode="clipMode" Elevation="1" Variant="@DrawerVariant.Responsive">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">My App</MudText>
        </MudDrawerHeader>
        <MudNavMenu>
            <MudNavLink Match="NavLinkMatch.All">Store</MudNavLink>
            <MudNavLink Match="NavLinkMatch.All">Library</MudNavLink>
            <MudNavLink Match="NavLinkMatch.All">Community</MudNavLink>
        </MudNavMenu>
    </MudDrawer>
    <MudMainContent Class="pt-16 px-16">
        <MudContainer Class="mt-6">
            <MudSelect Label="Select clip mode" @bind-Value="clipMode">
                <MudSelectItem Value="@DrawerClipMode.Never">Not clipped (DrawerClipMode.Never)</MudSelectItem>
                <MudSelectItem Value="@DrawerClipMode.Docked">Drawer is docked (DrawerClipMode.Docked)</MudSelectItem>
                <MudSelectItem Value="@DrawerClipMode.Always">Always (DrawerClipMode.Always)</MudSelectItem>
            </MudSelect>
            <MudSwitch @bind-Checked="@dense" Label="Dense appbar" Color="Color.Primary" Style="width:100%;" />
        </MudContainer>
    </MudMainContent>
</MudLayout>
@code{
    bool open = false;
    bool dense = false;
    DrawerClipMode clipMode = DrawerClipMode.Never;

    void ToggleDrawer()
    {
        open = !open;
    }
}

Custom Breakpoint

The switching point for responsive drawers can be changed using Breakpoint parameter. The default is Breakpoint.Md

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudLayout>
    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@ToggleDrawer" />
        <MudAppBarSpacer />
        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/Garderoben/MudBlazor" Target="_blank" />
    </MudAppBar>
    <MudDrawer @bind-Open="@open" Breakpoint="@breakpoint" Elevation="1" Variant="@DrawerVariant.Responsive" PreserveOpenState="@preserveOpenState">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">My App</MudText>
        </MudDrawerHeader>
        <MudNavMenu>
            <MudNavLink Match="NavLinkMatch.All">Store</MudNavLink>
            <MudNavLink Match="NavLinkMatch.All">Library</MudNavLink>
            <MudNavLink Match="NavLinkMatch.All">Community</MudNavLink>
        </MudNavMenu>
    </MudDrawer>
    <MudMainContent Class="pt-16 px-16">
        <MudContainer Class="mt-6">
            <MudSelect Label="Select clip mode" @bind-Value="breakpoint">
                <MudSelectItem Value="@Breakpoint.Sm">Breakpoint.Sm</MudSelectItem>
                <MudSelectItem Value="@Breakpoint.Md">Breakpoint.Md</MudSelectItem>
                <MudSelectItem Value="@Breakpoint.Lg">Breakpoint.Lg</MudSelectItem>
                <MudSelectItem Value="@Breakpoint.Xl">Breakpoint.Xl</MudSelectItem>
            </MudSelect>
            <MudSwitch @bind-Checked="@preserveOpenState" Label="Preserve open state" Color="Color.Primary" Style="width:100%;" />
        </MudContainer>
    </MudMainContent>
</MudLayout>
@code{
    bool open = false;
    bool preserveOpenState = false;
    Breakpoint breakpoint = Breakpoint.Lg;

    void ToggleDrawer()
    {
        open = !open;
    }
}

Sizing drawers

It is possible to apply custom width/height values for drawers. The following examples demonstrate how to do it for different types of drawers.

1. Change drawers inside MudLayout

Changing the default width (240px) of a left and/or right drawer is possible through setting DrawerWidthLeft and/or DrawerWidthRight layout properties. For more information see customization page.

2. Change size for temporary drawers

Changing the default size is possible by setting the Width or Height parameters.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.Left))">Left</MudButton>
<MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.Right))">Right</MudButton>
<MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.Top))">Top</MudButton>
<MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.Bottom))">Bottom</MudButton>

<MudDrawer @bind-Open="@open" Width="@width" Height="@height" Anchor="@anchor" Elevation="1" Variant="@DrawerVariant.Temporary">
    <MudDrawerHeader>
        <MudText Typo="Typo.h6">My App</MudText>
    </MudDrawerHeader>
    <MudNavMenu>
        <MudNavLink Match="NavLinkMatch.All">Store</MudNavLink>
        <MudNavLink Match="NavLinkMatch.All">Library</MudNavLink>
        <MudNavLink Match="NavLinkMatch.All">Community</MudNavLink>
    </MudNavMenu>
</MudDrawer>
@code{ 
    bool open;
    Anchor anchor;
    string width, height;

    void OpenDrawer(Anchor anchor)
    {
        open = true;
        this.anchor = anchor;

        switch (anchor)
        {
            case Anchor.Left:
                width = "300px";
                height = "100%";
                break;
            case Anchor.Right:
                width = "400px";
                height = "100%";
                break;
            case Anchor.Bottom:
                width = "100%";
                height = "200px";
                break;
            case Anchor.Top:
                width = "100%";
                height = "350px";
                break;
        }
    }
}

3. Change size for persistent drawers inside MudDrawerContainer

Changing the default size is possible by setting the Width parameter.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudPaper Height="200px" Class="mud-theme-primary" Style="overflow:hidden; position:relative;">
    <MudDrawerContainer Class="mud-height-full">
        <MudDrawer @bind-Open="@openLeft" Width="150px" Fixed="false" Anchor="Anchor.Left" Elevation="0" Variant="@DrawerVariant.Persistent">
            <MudDrawerHeader>
                <MudText Typo="Typo.h6">My App</MudText>
            </MudDrawerHeader>
            <MudNavMenu>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.Store">Store</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.LocalLibrary">Library</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.Forum">Community</MudNavLink>
            </MudNavMenu>
        </MudDrawer>
        <MudDrawer @bind-Open="@openRight" Width="300px" Fixed="false" Anchor="Anchor.Right" Elevation="0" Variant="@DrawerVariant.Persistent">
            <MudDrawerHeader>
                <MudText Typo="Typo.h6">Settings</MudText>
            </MudDrawerHeader>
            <MudNavMenu>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.AccountBox">Profile</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.ShoppingCart">Orders</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Filled.History">Order History</MudNavLink>
            </MudNavMenu>
        </MudDrawer>
        <div class="d-flex justify-center align-center mud-height-full">
            <MudButton Color="Color.Inherit" OnClick="@ToggleLeftDrawer" StartIcon="@Icons.Filled.West" Class="mx-2">Toggle left</MudButton>
            <MudButton Color="Color.Inherit" OnClick="@ToggleRightDrawer" EndIcon="@Icons.Filled.East" Class="mx-2">Toggle right</MudButton>
        </div>
    </MudDrawerContainer>
</MudPaper>
@code
{ 
    bool openLeft = false;
    bool openRight = false;

    void ToggleLeftDrawer()
    {
        openLeft = !openLeft;
    }

    void ToggleRightDrawer()
    {
        openRight = !openRight;
    } 
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙