Implement and configure Syncfusion TreeNavigator control for Windows Forms - a unique navigation interface that expands tree structures in-place without taking extra space. Use when you need hierarchical navigation with breadcrumb modes, drill-down capabilities, or space-efficient collapsible navigation menus. Covers in-place tree expansion, back button navigation, expandable menu items, file explorer-style navigation, and replacing standard TreeView with collapsible alternatives.
A unique navigation control for Windows Forms that provides in-place tree expansion without consuming additional screen space. Items expand and collapse inline, allowing users to drill down through hierarchical structures by clicking items.
Use this skill when you need to:
The TreeNavigator control provides a unique interface for hierarchical navigation:
Key Capabilities:
NavigationMode property for selecting navigation style (Default or Extended)Items collection for managing TreeMenuItem objectsHeader configuration for customizing header appearance and behaviorStyle property for applying Office 2016/2019 visual themesSelectedItem property for programmatic selection📄 Read: references/getting-started.md
When to read: Starting new implementation, setting up dependencies, first-time usage, basic TreeNavigator creation
Topics covered:
📄 Read: references/navigation-modes.md
When to read: Choosing navigation behavior, implementing back button navigation, breadcrumb-style interfaces
Topics covered:
📄 Read: references/appearance-styling.md
When to read: Customizing visual appearance, applying themes, styling headers, configuring borders and colors
Topics covered:
📄 Read: references/tree-menu-items.md
When to read: Managing items, adding/removing TreeMenuItems, building hierarchies, manipulating item collections
Topics covered:
📄 Read: references/selection-events.md
When to read: Handling selection changes, responding to navigation, programmatically selecting items, preventing selection
Topics covered:
using Syncfusion.Windows.Forms.Tools;
// Create TreeNavigator
TreeNavigator treeNavigator = new TreeNavigator();
treeNavigator.Size = new Size(250, 400);
treeNavigator.Header.HeaderText = "This PC";
treeNavigator.Style = TreeNavigatorStyle.Office2016Colorful;
treeNavigator.NavigationMode = NavigationMode.Extended;
// Add root items
TreeMenuItem desktop = new TreeMenuItem { Text = "Desktop" };
TreeMenuItem documents = new TreeMenuItem { Text = "Documents" };
TreeMenuItem downloads = new TreeMenuItem { Text = "Downloads" };
// Add items to TreeNavigator
treeNavigator.Items.Add(desktop);
treeNavigator.Items.Add(documents);
treeNavigator.Items.Add(downloads);
// Add child items to Documents
TreeMenuItem workFiles = new TreeMenuItem { Text = "Work Files" };
TreeMenuItem personalFiles = new TreeMenuItem { Text = "Personal Files" };
documents.Items.Add(workFiles);
documents.Items.Add(personalFiles);
this.Controls.Add(treeNavigator);
Imports Syncfusion.Windows.Forms.Tools
' Create TreeNavigator
Dim treeNavigator As New TreeNavigator()
treeNavigator.Size = New Size(250, 400)
treeNavigator.Header.HeaderText = "This PC"
treeNavigator.Style = TreeNavigatorStyle.Office2016Colorful
treeNavigator.NavigationMode = NavigationMode.Extended
' Add root items
Dim desktop As New TreeMenuItem With {.Text = "Desktop"}
Dim documents As New TreeMenuItem With {.Text = "Documents"}
Dim downloads As New TreeMenuItem With {.Text = "Downloads"}
' Add items to TreeNavigator
treeNavigator.Items.Add(desktop)
treeNavigator.Items.Add(documents)
treeNavigator.Items.Add(downloads)
' Add child items to Documents
Dim workFiles As New TreeMenuItem With {.Text = "Work Files"}
Dim personalFiles As New TreeMenuItem With {.Text = "Personal Files"}
documents.Items.Add(workFiles)
documents.Items.Add(personalFiles)
Me.Controls.Add(treeNavigator)
// Create TreeNavigator for settings
TreeNavigator settingsNav = new TreeNavigator();
settingsNav.Header.HeaderText = "Settings";
settingsNav.Style = TreeNavigatorStyle.Office2016White;
settingsNav.NavigationMode = NavigationMode.Default;
// Customize appearance
settingsNav.Header.HeaderBackColor = Color.FromArgb(0, 120, 215);
settingsNav.Header.HeaderForeColor = Color.White;
settingsNav.ItemBackColor = Color.WhiteSmoke;
// Add settings categories
TreeMenuItem general = new TreeMenuItem { Text = "General" };
TreeMenuItem appearance = new TreeMenuItem { Text = "Appearance" };
TreeMenuItem advanced = new TreeMenuItem { Text = "Advanced" };
settingsNav.Items.Add(general);
settingsNav.Items.Add(appearance);
settingsNav.Items.Add(advanced);
// Add sub-settings
general.Items.Add(new TreeMenuItem { Text = "Language" });
general.Items.Add(new TreeMenuItem { Text = "Startup" });
appearance.Items.Add(new TreeMenuItem { Text = "Theme" });
appearance.Items.Add(new TreeMenuItem { Text = "Colors" });
// Create breadcrumb-style navigator
TreeNavigator breadcrumbNav = new TreeNavigator();
breadcrumbNav.NavigationMode = NavigationMode.Extended;
breadcrumbNav.Style = TreeNavigatorStyle.Office2016Colorful;
// Handle selection changes
breadcrumbNav.SelectionChanged += (sender, e) => {
TreeMenuItem selected = e.SelectedItem;
bool isExpanded = e.Expanded;
// Update content panel based on selection
MessageBox.Show($"Navigated to: {selected.Text}\nExpanded: {isExpanded}");
};
// Build hierarchy
TreeMenuItem root = new TreeMenuItem { Text = "Home" };
breadcrumbNav.Items.Add(root);
TreeMenuItem level1 = new TreeMenuItem { Text = "Category" };
TreeMenuItem level2 = new TreeMenuItem { Text = "Subcategory" };
root.Items.Add(level1);
level1.Items.Add(level2);
// Create compact navigation
TreeNavigator compactNav = new TreeNavigator();
compactNav.ShowHeader = false; // Hide header for compact look
compactNav.Style = TreeNavigatorStyle.Office2016DarkGray;
compactNav.PadY = 5; // Reduce spacing between items
// Customize item colors
TreeMenuItem dashboard = new TreeMenuItem
{
Text = "Dashboard",
ItemBackColor = Color.FromArgb(45, 45, 48),
ItemHoverColor = Color.FromArgb(62, 62, 66),
SelectedColor = Color.FromArgb(0, 122, 204)
};
TreeMenuItem reports = new TreeMenuItem
{
Text = "Reports",
ItemBackColor = Color.FromArgb(45, 45, 48),
ItemHoverColor = Color.FromArgb(62, 62, 66)
};
compactNav.Items.Add(dashboard);
compactNav.Items.Add(reports);
// Add report sub-items
reports.Items.Add(new TreeMenuItem { Text = "Sales" });
reports.Items.Add(new TreeMenuItem { Text = "Inventory" });
reports.Items.Add(new TreeMenuItem { Text = "Analytics" });
| Property | Type | Description |
|---|---|---|
| Items | Collection | Collection of TreeMenuItem objects that form the navigation hierarchy |
| NavigationMode | NavigationMode | Navigation style: Default (back button) or Extended (breadcrumb) |
| Style | TreeNavigatorStyle | Visual theme: Office2016Colorful/White/Black/DarkGray, Office2019Colorful, Default |
| SelectedItem | TreeMenuItem | Gets or sets the currently selected item in the current hierarchy level |
| Header.HeaderText | string | Text displayed in the header area |
| Header.HeaderBackColor | Color | Background color of the header |
| Header.HeaderForeColor | Color | Foreground (text) color of the header |
| Header.Height | int | Height of the header area in pixels |
| ShowHeader | bool | Shows or hides the header area (true = visible, false = hidden) |
| BorderColor | Color | Color of the control border |
| BorderThickness | int | Thickness of the control border in pixels |
| PadY | int | Vertical spacing (gap) between TreeMenuItem items |
| ItemBackColor | Color | Background color for all TreeMenuItem items (can be overridden per item) |
| TextAlign | TextAlignment | Text alignment for items: Center, Left, or Right |
| UseTouchScrollBehavior | bool | Enables touch-friendly scrolling with auto-hide scrollbar |