MudBlazor - Blazor Component Library

Usage

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.

Always use @bind-Open instead of Open for auto-closing to work.

Variants

The drawer can be displayed in many different ways, like other components you can set the different variants with Variant property but uses DrawerVariant enum.

Hide overlay

With Overlay="false" the overlay can be turned off for Responsive and Temporary Drawers.

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(() => ToggleDrawer())">Toggle drawer</MudButton>

<MudDrawer @bind-Open="@_open" Overlay="false" 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{ 
    private bool _open;

    private void ToggleDrawer()
    {
        _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.

<MudPaper Height="200px" Class="mud-theme-primary" Style="overflow:hidden; position:relative;">
    <MudDrawerContainer Class="mud-height-full">
        <MudDrawer @bind-Open="@_openStart" Anchor="Anchor.Start" Elevation="0" Variant="@DrawerVariant.Persistent">
            <MudDrawerHeader>
                <MudText Typo="Typo.h6">My App</MudText>
            </MudDrawerHeader>
            <MudNavMenu>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Store">Store</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.LocalLibrary">Library</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Forum">Community</MudNavLink>
            </MudNavMenu>
        </MudDrawer>
        <MudDrawer @bind-Open="@_openEnd" Fixed="false" Anchor="Anchor.End" Elevation="0" Variant="@DrawerVariant.Persistent">
            <MudDrawerHeader>
                <MudText Typo="Typo.h6">Settings</MudText>
            </MudDrawerHeader>
            <MudNavMenu>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.AccountBox">Profile</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.ShoppingCart">Orders</MudNavLink>
                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.History">Order History</MudNavLink>
            </MudNavMenu>
        </MudDrawer>
        <div class="d-flex justify-center align-center mud-height-full">
            <MudButton Color="Color.Inherit" OnClick="@ToggleStartDrawer" StartIcon="@(Rtl ? Icons.Material.Filled.East : Icons.Material.Filled.West)" Class="mx-2">Toggle start</MudButton>
            <MudButton Color="Color.Inherit" OnClick="@ToggleEndDrawer" EndIcon="@(Rtl ? Icons.Material.Filled.West : Icons.Material.Filled.East)" Class="mx-2">Toggle end</MudButton>
        </div>
    </MudDrawerContainer>
</MudPaper>

@code
{
    private bool _openStart = false;
    private bool _openEnd = false;

    [CascadingParameter]
    public bool Rtl { get; set; }

    private void ToggleStartDrawer()
    {
        _openStart = !_openStart;
    }

    private void ToggleEndDrawer()
    {
        _openEnd = !_openEnd;
    }
}