FodDrawer provides responsive navigation panels that slide from any viewport edge. Supports modal and non-modal flows, multiple variants (Temporary, Persistent, Permanent), and keeps focus management plus scroll locking compliant with WCAG requirements.
Temporary drawers cover the content and use a scrim. Click the button to open the drawer, then press Esc or the close button.
Click to open temporary drawer
<FodDrawer Open="@_open"
OpenChanged="@(value => _open = value)"
Anchor="DrawerAnchor.Left"
Variant="DrawerVariant.Temporary">
<Header>
<div>Workspace</div>
</Header>
<ChildContent>
<p>Drawer content here</p>
</ChildContent>
<Footer>
<FodButton OnClick="@(() => _open = false)">Close</FodButton>
</Footer>
</FodDrawer>FodDrawer supports three variants: Temporary (modal with scrim), Persistent (collapsible sidebar), and Permanent (always visible).
Temporary
Covers content with a scrim. Ideal for mobile or focused tasks.
Persistent
Sits alongside content and can collapse without a scrim.
Permanent
Always visible, typically paired with app bars.
<FodDrawer Variant="DrawerVariant.Temporary">...</FodDrawer>
<FodDrawer Variant="DrawerVariant.Persistent">...</FodDrawer>
<FodDrawer Variant="DrawerVariant.Permanent">...</FodDrawer>Configure drawer behavior with backdrop, scroll lock, and escape key handling options.
Configuration Options
Test Configuration
<FodDrawer CloseOnEscape="true"
DisableBackdrop="false"
DisableScrollLock="false">
...
</FodDrawer>Use FodDrawerContainer for persistent drawers that push content. The drawer stays fixed while scrolling, with its own internal scroll for navigation items.
This content scrolls with the page. The drawer remains fixed on the left side.
Sample content section demonstrating scroll behavior. Notice how the drawer stays fixed.
Sample content section demonstrating scroll behavior. Notice how the drawer stays fixed.
Sample content section demonstrating scroll behavior. Notice how the drawer stays fixed.
Sample content section demonstrating scroll behavior. Notice how the drawer stays fixed.
Sample content section demonstrating scroll behavior. Notice how the drawer stays fixed.
Sample content section demonstrating scroll behavior. Notice how the drawer stays fixed.
Sample content section demonstrating scroll behavior. Notice how the drawer stays fixed.
Sample content section demonstrating scroll behavior. Notice how the drawer stays fixed.
<FodDrawerContainer>
<FodDrawer @bind-Open="_open"
Variant="DrawerVariant.Persistent"
Width="240px">
<!-- Drawer content -->
</FodDrawer>
<FodDrawerContent>
<!-- Main content -->
</FodDrawerContent>
</FodDrawerContainer>Mini drawers reduce to icon-only rails until expanded, perfect for dense dashboards.
<FodDrawer EnableMini="true"
MiniWidth="72px"
Width="200px">
<ChildContent>Full content</ChildContent>
<MiniContent>Icon-only content</MiniContent>
</FodDrawer>Drawers can slide from any edge of the viewport. Click each button to see the drawer appear from that direction.
Left
Most common for navigation
Right
Filters, details panels
Top
Notifications, secondary nav
Bottom
Mobile actions, sheets
<FodDrawer Anchor="DrawerAnchor.Left">...</FodDrawer>
<FodDrawer Anchor="DrawerAnchor.Right">...</FodDrawer>
<FodDrawer Anchor="DrawerAnchor.Top" Height="40vh">...</FodDrawer>
<FodDrawer Anchor="DrawerAnchor.Bottom" Height="40vh">...</FodDrawer>Hook into drawer lifecycle events to coordinate animations, analytics, or state changes.
<FodDrawer OnOpening="HandleOpening"
OnOpened="HandleOpened"
OnClosing="HandleClosing"
OnClosed="HandleClosed">
...
</FodDrawer>On touch devices, temporary drawers can be closed with swipe gestures. Try it on mobile or use browser dev tools touch emulation.
<FodDrawer EnableSwipeToClose="true"
SwipeThreshold="50">
...
</FodDrawer>Drawers automatically adapt to RTL layouts. Left/right anchors are mirrored, and spacing respects text direction.
Current direction: LTR (Left-to-Right)
In LTR mode, drawers behave normally with left/right anchors as expected.
<div dir="rtl">
<FodDrawer Anchor="DrawerAnchor.Left">
<!-- Appears on right in RTL mode -->
</FodDrawer>
</div>Configure anchors, variants, overlay behavior, and mini mode to see how the drawer responds in real time.
Configuration
Preview
Click the backdrop or ESC (when enabled) to close.
<FodDrawer Variant="@variant"
Anchor="@anchor"
Width="320px"
EnableMini="true"
Modal="true">
...
</FodDrawer>FodDrawer follows WCAG guidelines with proper ARIA roles, keyboard support, and focus management.
Temporary drawers use role="dialog" with
aria-modal="true".
Persistent/permanent drawers announce as complementary regions.
Focus moves inside when opened, Tab/Shift+Tab are trapped in modal mode, Esc closes when enabled, and focus returns to the trigger.
Provide a descriptive header element so screen readers announce the purpose of the drawer immediately.
Guidelines for effective drawer usage.
FodDrawer component parameters and their descriptions.
FodDrawer component events for lifecycle and interaction handling.