ComponentsNavigation
Drawer
A side panel for navigation or secondary content. Choose the variant by how much room you have: persistent and mini push the content aside, temporary floats above it, responsive switches between the two at a breakpoint.
Persistent drawer
Opens beside the content and pushes it aside. Every preview here sits in its own MudDrawerContainer with Fixed set to false, so it never touches this site's own drawer.
Catalogue
The persistent drawer pushes this column aside instead of covering it.
Mini drawer
Closed, the mini variant keeps a strip of icons; open, it shows the labels. OpenMiniOnHover expands it while the pointer rests on it.
Overview
Collapsed, the link text is hidden visually but stays available to screen readers.
Temporary drawer, anchors and overlay
A temporary drawer floats above the content from any edge. The overlay darkens the rest; OverlayAutoClose decides whether a click on it closes the drawer.
Route planner
The drawer opens over this area. Anchor: Left.
Clip modes in a layout
Inside a MudLayout with an app bar, ClipMode decides whether the drawer starts below the bar. The default variant, Responsive, behaves like this persistent drawer above its Breakpoint and like a temporary one below it: this site's own drawer is responsive, so narrow the window to watch it switch.
Titration
ClipMode.Never: the drawer runs the full height and the app bar shortens beside it.
Playground
Variant, anchor, size and color of a drawer in a contained preview, with the markup they produce.
Folder: Inbox
<MudDrawer @bind-Open="_open" Variant="DrawerVariant.Persistent">
<MudNavMenu>…</MudNavMenu>
</MudDrawer>