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.
Temporary
Temporary Drawers can be opened temporarily above all other content until a section is selected or clicked on an overlay.
<MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.Start))">Start</MudButton> <MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.End))">End</MudButton> <MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.Top))">Top</MudButton> <MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.Bottom))">Bottom</MudButton> <MudDrawer @bind-Open="" 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.
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(() => ToggleDrawer())">Toggle drawer</MudButton> <MudDrawer @bind-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; } }