Implements the Syncfusion WPF SfNavigationDrawer for slide-out navigation panels and sidebars. Use when building collapsible side panels, hierarchical navigation menus, or responsive drawer display modes (compact/expanded).
Implements the Syncfusion WPF SfNavigationDrawer for slide-out navigation panels and sidebars. Use when building collapsible side panels, hierarchical navigation menus, or responsive drawer display modes (compact/expanded).
metadata
{"author":"Syncfusion Inc","version":"34.1.29"}
Implementing Syncfusion WPF Navigation Drawer
The WPF Navigation Drawer control is a sidebar navigation component used to create intuitive and efficient navigation menus within applications. It supports compact and expanded display modes, allowing users to switch between them dynamically based on the available screen size. Additionally, the control offers a default mode that enables developers to define a fully custom pane view, providing greater flexibility in designing navigation experiences
When to Use This Skill
Use this skill when user need to:
Create sidebar navigation menus in WPF applications
Implement collapsible drawer navigation with hamburger menu
Build responsive navigation with compact and expanded modes
Add hierarchical navigation menu items with icons
Implement swipeable side panels
Create custom navigation views with headers and footers
Handle navigation events and selection
Support keyboard navigation in drawer menus
Build modern UI navigation patterns in WPF
Component Overview
The Syncfusion WPF Navigation Drawer (SfNavigationDrawer) is a sidebar navigation control that provides:
Three Display Modes: Default (collapsible), Compact (icon-only), Expanded (full width)
Flexible Positioning: Left, Right, Top, or Bottom placement
Built-in Navigation Items: Tab, Button, Header, Separator types with hierarchical support
Custom Views: Fully customizable header, content, and footer sections
Data Binding: Support for ItemsSource with hierarchical data binding
When to use: Dynamic navigation menus from database or API
Key Properties
Essential Properties
Property
Type
Description
DisplayMode
DisplayMode
Default, Compact, or Expanded
Items
NavigationItemsCollection
Collection of NavigationItem objects
ContentView
object
Main content area
IsOpen
bool
Gets/sets drawer open state
SelectedItem
object
Currently selected navigation item
Position
Position
Left, Right, Top, Bottom (Default mode)
Display Mode Properties
Property
Type
Default
Description
AutoChangeDisplayMode
bool
false
Auto-switch modes based on width
ExpandedModeThresholdWidth
double
1007
Width threshold for auto mode switching
CompactModeWidth
double
48
Width in compact mode
ExpandedModeWidth
double
320
Width in expanded mode
Customization Properties
Property
Type
Description
DrawerWidth
double
Drawer width (Default mode, Left/Right)
DrawerHeight
double
Drawer height (Default mode, Top/Bottom)
DrawerBackground
Brush
Background color of drawer
HeaderHeight
double
Height of header section
FooterHeight
double
Height of footer section
IndentationWidth
double
Horizontal spacing for sub-items
Animation Properties
Property
Type
Options
Transition
Transition
SlideOnTop, Push, Reveal
AnimationDuration
TimeSpan
Duration of open/close animation
EnableSwipeGesture
bool
Enable swipe to open/close
TouchThreshold
double
Swipe sensitivity (pixels)
Template Properties
Property
Type
Description
ToggleButtonContentTemplate
DataTemplate
Customize toggle button content
ToggleButtonIconTemplate
DataTemplate
Customize toggle button icon
ItemTemplate
DataTemplate
Template for navigation items
ItemTemplateSelector
DataTemplateSelector
Dynamic template selection
Common Use Cases
Use Case 1: Email Client Navigation
Scenario: Multi-level inbox with Primary, Social, Promotions
Solution: Use hierarchical NavigationItem with IsExpanded, Compact/Expanded modes
Reference:references/populating-data.md
Use Case 2: Admin Dashboard
Scenario: Top-level menu (Dashboard, Users, Settings) with sub-sections
Solution: Data binding with ItemsSource, hierarchical data structure
Reference:references/populating-data.md
Use Case 3: Mobile-Style App
Scenario: Hamburger menu that slides over content
Solution: Default mode with DrawerHeaderView, swipe gestures enabled
Reference:references/custom-views.md
Use Case 4: Responsive Desktop App
Scenario: Auto-collapse to compact mode on narrow windows
Solution: Expanded mode with AutoChangeDisplayMode=true
Reference:references/display-modes.md
Use Case 5: Banking App
Scenario: Accounts, Transfers, Payments with event handling
Solution: ItemClicked event, Command binding for navigation
Reference:references/commands-and-events.md
Implementation Tips
Choose the Right Display Mode:
Use Default for mobile-style overlays with custom views
Use Compact for icon-only sidebar that expands to full width
Use Expanded for always-visible full sidebar
Use Built-in Items vs Custom Views:
Use NavigationItem (Compact/Expanded) for standard navigation menus
Use Custom Views (Default mode) for unique layouts
Optimize Performance:
Use data binding with ItemsSource for large datasets
Implement ItemTemplateSelector for heterogeneous items
Keep hierarchies shallow (2-3 levels max)
Handle State Properly:
Use Opening/Closing events to cancel state changes
Store SelectedItem for navigation state restoration
Handle ItemClicked for page navigation
Ensure Accessibility:
Implement keyboard navigation (already built-in)
Provide meaningful Header text for screen readers
Use sufficient color contrast for SelectionBackground
