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; } }
Persistent
Persistent Drawer is outside of its container. When opened, it forces other contents to change their size.
Persistent Drawer will stay open until the Open
parameter is set to false again.
<MudPaper Height="200px" Style="overflow:hidden; position:relative;"> <MudDrawerContainer Class="mud-height-full"> <MudDrawer @bind-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.Material.Filled.Dashboard" IconColor="Color.Inherit">Dashboard</MudNavLink> <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.LocalLibrary" IconColor="Color.Inherit">Library</MudNavLink> <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.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="">Persistent drawer</MudButton> </div> </MudDrawerContainer> </MudPaper>
@code { bool open = false; void ToggleDrawer() { open = !open; } }
Responsive
Responsive Drawers behaves persistently on wider screens and temporarily on smaller ones. Opened Drawers close automatically when the window size becomes small, and opens after the original state has been restored.
<MudLayout> <MudAppBar Elevation="1"> <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="" /> <MudSpacer /> <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/MudBlazor/MudBlazor" Target="_blank" /> </MudAppBar> <MudDrawer @bind-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; } }
Mini
Using the Mini variant, the Drawer will shrink (default 56px). It currently only has built-in style support for MudNavLink
s.
<MudPaper Height="200px" Style="overflow:hidden; position:relative;"> <MudDrawerContainer Class="mud-height-full"> <MudDrawer @bind-Open="" Fixed="false" Elevation="1" Variant="@DrawerVariant.Mini" OpenMiniOnHover="true"> <MudNavMenu> <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Store">Store</MudNavLink> <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.LibraryBooks">Library</MudNavLink> <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Group">Community</MudNavLink> </MudNavMenu> </MudDrawer> <div class="d-flex justify-center align-center mud-height-full"> <MudButton OnClick="" Color="Color.Primary">Toggle</MudButton> </div> </MudDrawerContainer> </MudPaper>
@code { bool open = false; void ToggleDrawer() { open = !open; } }
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; } }
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="" 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="" 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="" StartIcon="@(Rtl ? Icons.Material.Filled.East : Icons.Material.Filled.West)" Class="mx-2">Toggle start</MudButton> <MudButton Color="Color.Inherit" OnClick="" EndIcon="@(Rtl ? Icons.Material.Filled.West : Icons.Material.Filled.East)" Class="mx-2">Toggle end</MudButton> </div> </MudDrawerContainer> </MudPaper>
@code { [CascadingParameter] public bool Rtl { get; set; } bool openStart = false; bool openEnd = false; void ToggleStartDrawer() { openStart = !openStart; } void ToggleEndDrawer() { openEnd = !openEnd; } }
Left/Right Drawer
Anchor.Left
and Anchor.Right
makes Drawer's position absolute, they will not follow RTL-LTR changes.
<MudPaper Height="200px" Class="mud-theme-primary" Style="overflow:hidden; position:relative;"> <MudDrawerContainer Class="mud-height-full"> <MudDrawer @bind-Open="" Anchor="Anchor.Left" 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="" 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.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"> @if (Rtl) { <MudButton Color="Color.Inherit" OnClick="" StartIcon="@Icons.Material.Filled.East" Class="mx-2">Toggle right</MudButton> <MudButton Color="Color.Inherit" OnClick="" EndIcon="@Icons.Material.Filled.West" Class="mx-2">Toggle left</MudButton> } else { <MudButton Color="Color.Inherit" OnClick="" StartIcon="@Icons.Material.Filled.West" Class="mx-2">Toggle left</MudButton> <MudButton Color="Color.Inherit" OnClick="" EndIcon="@Icons.Material.Filled.East" Class="mx-2">Toggle right</MudButton> } </div> </MudDrawerContainer> </MudPaper>
@code { [CascadingParameter] public bool Rtl { get; set; } bool openLeft = false; bool openRight = false; void ToggleLeftDrawer() { openLeft = !openLeft; } void ToggleRightDrawer() { openRight = !openRight; } }
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 different options work with a Responsive Drawer. Change the size of the window to test all possiblities.
<MudLayout> <MudAppBar Elevation="1" Dense=""> <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="" /> <MudSpacer /> <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/MudBlazor/MudBlazor" Target="_blank" /> </MudAppBar> <MudDrawer @bind-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="" 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 the Breakpoint
parameter. The default is Breakpoint.Md
.
<MudLayout> <MudAppBar Elevation="1"> <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="" /> <MudSpacer /> <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/MudBlazor/MudBlazor" Target="_blank" /> </MudAppBar> <MudDrawer @bind-Open="" Breakpoint="" Elevation="1" Variant="@DrawerVariant.Responsive" 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 breakpoint" @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="" 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; } }
Mini Drawer Customization
This example demonstrates how the combination of several parameters will affect the behaviour of a Mini Drawer.
<MudLayout> <MudAppBar Elevation="1" Dense=""> <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="" /> <MudSpacer /> <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/MudBlazor/MudBlazor" Target="_blank" /> </MudAppBar> <MudDrawer @bind-Open="" ClipMode="clipMode" Breakpoint="" PreserveOpenState="" Elevation="1" Variant="@DrawerVariant.Mini"> <MudNavMenu> <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Store">Store</MudNavLink> <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.LibraryBooks">Library</MudNavLink> <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Group">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> <MudSelect Label="Select breakpoint" @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="" Label="Preserve open state" Color="Color.Primary" Style="width:100%;" /> <MudSwitch @bind-Checked="" Label="Dense appbar" Color="Color.Primary" Style="width:100%;" /> </MudContainer> </MudMainContent> </MudLayout>
@code{ bool open = false; bool dense = false; bool preserveOpenState = false; Breakpoint breakpoint = Breakpoint.Lg; DrawerClipMode clipMode = DrawerClipMode.Never; void ToggleDrawer() { open = !open; } }
Sizing Drawers
It is possible to set custom width/height values for Sizing Drawers. The following examples demonstrate how to do it for different types of Drawers.
Inside MudLayout
Changing the default width (240px) of a left and/or right Drawer is possible by setting the
DrawerWidthLeft
and/or DrawerWidthRight
layout properties.
For Mini Drawers, DrawerMiniWidthLeft
and/or DrawerMiniWidthRight
can be used.
For more information, see customization page.
Temporary Drawers
Changing the default size is possible by setting the Width
or Height
parameters.
<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="" Width="" Height="" 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.Start: width = "300px"; height = "100%"; break; case Anchor.End: width = "400px"; height = "100%"; break; case Anchor.Bottom: width = "100%"; height = "200px"; break; case Anchor.Top: width = "100%"; height = "350px"; break; } } }
Persistent Drawers Inside MudDrawerContainer
Changing the default size is possible by setting the Width
parameter.
<MudPaper Height="200px" Class="mud-theme-primary" Style="overflow:hidden; position:relative;"> <MudDrawerContainer Class="mud-height-full"> <MudDrawer @bind-Open="" Width="150px" Fixed="false" 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="" Width="300px" 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="" StartIcon="@(Rtl ? Icons.Material.Filled.East : Icons.Material.Filled.West)" Class="mx-2">Toggle start</MudButton> <MudButton Color="Color.Inherit" OnClick="" EndIcon="@(Rtl ? Icons.Material.Filled.West : Icons.Material.Filled.East)" Class="mx-2">Toggle end</MudButton> </div> </MudDrawerContainer> </MudPaper>
@code { [CascadingParameter] public bool Rtl { get; set; } bool openStart = false; bool openEnd = false; void ToggleStartDrawer() { openStart = !openStart; } void ToggleEndDrawer() { openEnd = !openEnd; } }