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.
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; } }