Drawer
Slide-in side panel for master/detail flows. Right (default), left, or bottom positions; backdrop click & ESC close; size sm/md/lg/xl/full.
Positions
Right, left, or bottom
Right is the default for master/detail. Left for nav drawers. Bottom for mobile-like sheets.
razor
<Drawer @bind-IsOpen="_open" Position="right" Size="md" Title="Right drawer">
<Body>...</Body>
</Drawer>
<Drawer @bind-IsOpen="_open" Position="left" Size="md" Title="Left drawer" />
<Drawer @bind-IsOpen="_open" Position="bottom" Size="md" Title="Bottom drawer" />Sizes (right position)
sm 320px · md 480px · lg 640px · xl 800px
razor
@* sm 320px · md 480px · lg 640px · xl 800px · full 100vw *@
<Drawer @bind-IsOpen="_open" Position="right" Size="sm" Title="Small drawer" />
<Drawer @bind-IsOpen="_open" Position="right" Size="lg" Title="Large drawer" />Master/detail — click a row to view detail
Patient list → detail drawer
The canonical use case: a list page where each row opens a side panel with the detail view.
razor
<Drawer @bind-IsOpen="_patientOpen"
Position="right"
Size="lg"
Title="@(_currentPatient?.Name ?? "")"
Description="@(_currentPatient is null ? null : $"MRN {_currentPatient.Mrn}")">
<Body>
@if (_currentPatient is not null)
{
<div class="layout-detail-card">
<span>Status</span> <span>@_currentPatient.Status</span>
<span>Date of birth</span> <span>@_currentPatient.Dob.ToString("MMM d, yyyy")</span>
@* ... *@
</div>
}
</Body>
<Footer>
<Button Variant="tertiary" OnClick="@(() => _patientOpen = false)">Close</Button>
<Button Variant="primary">Edit patient</Button>
</Footer>
</Drawer>