Syncfusion .NET MAUI Navigation Drawer Implementation
The Syncfusion Navigation Drawer (SfNavigationDrawer) is a flexible component that creates a sliding navigation pane in your .NET MAUI applications. It supports positioning from all four directions, animated transitions, swipe gestures, and comprehensive event handling.
When to Use This Skill
Use this skill when you need to:
- Implement drawer navigation in .NET MAUI applications that display a sliding pane
- Position navigation panes from left, right, top, or bottom edges of the screen
- Handle drawer interactions including open/close events, animations, and gesture support
- Configure drawer content with main content areas, headers, and drawer pane layouts
- Customize appearance with animations, sizing, and styling options
- Add mobile-friendly navigation that responds to swipes or programmatic toggles
- Manage complex navigation flows where a drawer provides contextual menu or additional options
Specific scenarios: Hamburger menus, side navigation panels, bottom sheet navigation, app drawers, overlay menus, and any slide-out navigation patterns in MAUI applications.
Component Overview
The SfNavigationDrawer consists of two main areas:
- ContentView - Always-visible main content area
- Drawer Pane - Hidden pane that slides in from the screen edge (positioned as Left, Right, Top, or Bottom)
Key features:
- Four directional positioning (Left, Right, Top, Bottom)
- Animated transitions (SlideOnTop, Push, Reveal)
- Swipe gesture support for opening/closing
- Comprehensive event handling (Opening, Opened, Closing, Closed, Toggled)
- Configurable drawer width/height and animations
- Support for complex drawer content layouts
Documentation and Navigation Guide
Read the reference files below in order based on your implementation needs:
Getting Started with Navigation Drawer
📄 Read: references/getting-started.md
- Installing Syncfusion MAUI Toolkit package
- Registering handlers in MauiProgram.cs
- Creating your first Navigation Drawer
- Setting ContentView (mandatory)
- Basic XAML and C# implementation
Content Configuration & Layout
📄 Read: references/drawer-content.md
- Configuring main content (ContentView property)
- Setting up drawer pane content
- Header and layout configuration
- Dynamic content switching
- Best practices for content organization
Positioning & Sizing the Drawer
📄 Read: references/positioning-sizing.md
- Drawer positioning (Left, Right, Top, Bottom)
- DrawerSettings configuration
- Setting drawer width and height
- Drawer header sizing
- Responsive drawer sizing patterns
Events & Interaction Handling
📄 Read: references/events-interaction.md
- Event types (DrawerOpening, DrawerOpened, DrawerClosing, DrawerClosed, DrawerToggled)
- Handling drawer state changes
- Canceling drawer operations
- Event-based navigation patterns
- User interaction workflows
Animations & Transitions
📄 Read: references/animations-transitions.md
- Animation types (SlideOnTop, Push, Reveal)
- Duration configuration and timing
- Toggle animation settings
- Smooth transition patterns
- Performance considerations
Gestures & Accessibility
📄 Read: references/gestures-accessibility.md
- Swipe gesture support for opening/closing
- Programmatic drawer toggling
- Keyboard interaction and accessibility
- Screen reader support
- Best practices for inclusive design
1---2name: syncfusion-maui-toolkit-navigation-drawer3description: Implement the Syncfusion .NET MAUI Navigation Drawer (SfNavigationDrawer) control for creating navigation panes that slide from screen edges. Covers positioning (left, right, top, bottom), content configuration, animations, events, gestures, and customization. Use this skill whenever implementing drawer navigation in MAUI apps.4---5
6# Syncfusion .NET MAUI Navigation Drawer Implementation
7
8The **Syncfusion Navigation Drawer** (`SfNavigationDrawer`) is a flexible component that creates a sliding navigation pane in your .NET MAUI applications. It supports positioning from all four directions, animated transitions, swipe gestures, and comprehensive event handling.
9
10## When to Use This Skill
11
12Use this skill when you need to:
13
14- **Implement drawer navigation** in .NET MAUI applications that display a sliding pane
15- **Position navigation panes** from left, right, top, or bottom edges of the screen
16- **Handle drawer interactions** including open/close events, animations, and gesture support
17- **Configure drawer content** with main content areas, headers, and drawer pane layouts
18- **Customize appearance** with animations, sizing, and styling options
19- **Add mobile-friendly navigation** that responds to swipes or programmatic toggles
20- **Manage complex navigation flows** where a drawer provides contextual menu or additional options
21
22**Specific scenarios:** Hamburger menus, side navigation panels, bottom sheet navigation, app drawers, overlay menus, and any slide-out navigation patterns in MAUI applications.
23
24---
25
26## Component Overview
27
28The `SfNavigationDrawer` consists of two main areas:
29
30- **ContentView** - Always-visible main content area
31- **Drawer Pane** - Hidden pane that slides in from the screen edge (positioned as Left, Right, Top, or Bottom)
32
33**Key features:**
34- Four directional positioning (Left, Right, Top, Bottom)
35- Animated transitions (SlideOnTop, Push, Reveal)
36- Swipe gesture support for opening/closing
37- Comprehensive event handling (Opening, Opened, Closing, Closed, Toggled)
38- Configurable drawer width/height and animations
39- Support for complex drawer content layouts
40
41---
42
43## Documentation and Navigation Guide
44
45Read the reference files below in order based on your implementation needs:
46
47### Getting Started with Navigation Drawer
48📄 **Read:** [references/getting-started.md](references/getting-started.md)
49- Installing Syncfusion MAUI Toolkit package
50- Registering handlers in MauiProgram.cs
51- Creating your first Navigation Drawer
52- Setting ContentView (mandatory)
53- Basic XAML and C# implementation
54
55### Content Configuration & Layout
56📄 **Read:** [references/drawer-content.md](references/drawer-content.md)
57- Configuring main content (ContentView property)
58- Setting up drawer pane content
59- Header and layout configuration
60- Dynamic content switching
61- Best practices for content organization
62
63### Positioning & Sizing the Drawer
64📄 **Read:** [references/positioning-sizing.md](references/positioning-sizing.md)
65- Drawer positioning (Left, Right, Top, Bottom)
66- DrawerSettings configuration
67- Setting drawer width and height
68- Drawer header sizing
69- Responsive drawer sizing patterns
70
71### Events & Interaction Handling
72📄 **Read:** [references/events-interaction.md](references/events-interaction.md)
73- Event types (DrawerOpening, DrawerOpened, DrawerClosing, DrawerClosed, DrawerToggled)
74- Handling drawer state changes
75- Canceling drawer operations
76- Event-based navigation patterns
77- User interaction workflows
78
79### Animations & Transitions
80📄 **Read:** [references/animations-transitions.md](references/animations-transitions.md)
81- Animation types (SlideOnTop, Push, Reveal)
82- Duration configuration and timing
83- Toggle animation settings
84- Smooth transition patterns
85- Performance considerations
86
87### Gestures & Accessibility
88📄 **Read:** [references/gestures-accessibility.md](references/gestures-accessibility.md)
89- Swipe gesture support for opening/closing
90- Programmatic drawer toggling
91- Keyboard interaction and accessibility
92- Screen reader support
93- Best practices for inclusive design
94
95---
gabrielmoreira