Siticone Breadcrumb
The SiticoneBreadcrumb is a sophisticated navigation control designed to visualize the user's journey within a hierarchical application structure.
It features Smart Navigation for automated view management, history tracking, and extensive theming capabilities.
Smart Navigation
The control's most powerful feature is its ability to automatically manage a TargetPanel.
Instead of manually hiding/showing UserControls, simply call NavigateTo, and the breadcrumb will handle the view stack, back navigation, and history automatically.
| Property | Type | Description & Usage Example |
|---|---|---|
EnableSmartNavigation |
bool |
crumb.EnableSmartNavigation = true;
If true, the breadcrumb manages the TargetPanel's controls collection.
Clicking a previous node automatically removes subsequent views and restores the target view.
|
TargetPanel |
Panel |
crumb.TargetPanel = pnlMainContainer;
The panel where NavigateTo will load UserControls.
Required if EnableSmartNavigation is true.
|
Appearance & Theming
Customize the visual style of the breadcrumb nodes, separators, and text. The control includes 22 built-in theme presets.
| Property | Type | Description & Usage Example |
|---|---|---|
Theme |
BreadcrumbTheme | crumb.Theme = BreadcrumbTheme.MaterialDesign; Applies a preset color scheme. Options include: Default, DarkMode, LightMode, Success, Danger, Warning, Info, RoyalPurple, MidnightBlue, ForestGreen, Chocolate, Magenta, SlateGray, OceanCyan, CherryBlossom, NightSky, Sunset, Mint, Gold, Silver, HighContrast, SiticoneSignature. |
SeparatorColor |
Color | crumb.SeparatorColor = Color.Gray; The color of the chevron (>) separator between nodes. |
HoverColor |
Color | crumb.HoverColor = Color.FromArgb(0, 208, 108); The text color when the mouse hovers over a clickable node. |
CurrentNodeColor |
Color | crumb.CurrentNodeColor = Color.Black; The text color of the last (active) node in the path. |
ParentNodeColor |
Color | crumb.ParentNodeColor = Color.DimGray; The text color of previous (clickable) nodes in the history. |
Public Methods
// Adds a new node to the breadcrumb history and loads the view into TargetPanel.
public void LoadUserSettings()
{
// 1. Create the new view
var settingsView = new UserSettingsControl();
// 2. Navigate: This adds "Settings" to the breadcrumb path
// and displays the UserControl in the target panel.
siticoneBreadcrumb1.NavigateTo("Settings", settingsView, null);
}
// Clears the entire history stack and sets a new root node.
// Useful when switching main modules (e.g., from Admin area to User Dashboard).
siticoneBreadcrumb1.ResetTo("Home", new DashboardControl());
// Manual Mode: Sets a static string path without managing views.
// Useful for displaying file paths or simple hierarchies.
siticoneBreadcrumb1.SetPath("Home > Documents > Reports > 2025", '>');
Events
Comprehensive events allow you to react to user navigation.
// Fires when any node is clicked. Provides rich data via BreadcrumbEventArgs.
// This is the recommended event for handling custom logic.
breadcrumb.NodeClicked += (s, e) =>
{
Console.WriteLine($"User clicked: {e.Title} at index {e.Index}");
// Access the view associated with this node
if (e.View is MyCustomControl customControl)
{
customControl.RefreshData();
}
};
// Legacy support for simple index/text retrieval.
breadcrumb.ItemClicked += (s, e) =>
{
MessageBox.Show($"You clicked: {e.ItemText}");
};
Detailed Usage Examples
Example 1: Smart Navigation Setup (Master-Detail)
This example sets up a fully automated navigation system where the breadcrumb controls a main content panel.
public void InitializeNavigation()
{
// 1. Configure the breadcrumb behavior
siticoneBreadcrumb1.EnableSmartNavigation = true;
siticoneBreadcrumb1.TargetPanel = pnlMainContent;
// 2. Set the starting point (Root)
siticoneBreadcrumb1.ResetTo("Dashboard", new DashboardView());
}
private void btnOpenProduct_Click(object sender, EventArgs e)
{
// 3. Navigate deeper. The breadcrumb adds "Products" to the path
// and automatically loads ProductListView into pnlMainContent.
siticoneBreadcrumb1.NavigateTo("Products", new ProductListView());
}
private void btnViewDetails_Click(object sender, EventArgs e)
{
// 4. Navigate even deeper. Path becomes: Dashboard > Products > Details
siticoneBreadcrumb1.NavigateTo("Details", new ProductDetailView(123));
}
// Result: If user clicks "Dashboard", the breadcrumb automatically removes
// "Products" and "Details" views and shows the original DashboardView.
Example 2: Manual String Path
Using the breadcrumb purely as a visual indicator for a file explorer or static hierarchy.
public void ShowFilePath(string path)
{
// Disable smart nav to prevent auto-panel manipulation
siticoneBreadcrumb1.EnableSmartNavigation = false;
// Apply a dark theme
siticoneBreadcrumb1.Theme = BreadcrumbTheme.DarkMode;
// Set the path string manually
// Input: "C:\Users\Admin\Documents" -> Output Nodes: C:, Users, Admin, Documents
siticoneBreadcrumb1.SetPath(path, '\\');
}
// Handle clicks manually
private void siticoneBreadcrumb1_NodeClicked(object sender, BreadcrumbEventArgs e)
{
// Reconstruct path up to the clicked index
Console.WriteLine($"Navigating to: {e.Title}");
}
Designer & Smart Tags
The control includes a robust Smart Tag panel in Visual Studio for rapid configuration.
| Feature | Description |
|---|---|
Theme Presets |
Instantly apply one of 22 professional color schemes (e.g., MidnightBlue, CherryBlossom, SiticoneSignature). Selection automatically updates all color properties. |
Copy/Paste UI Style |
Copy UI Style: Copies the visual configuration (Colors, Font) to an internal clipboard. Paste UI Style: Applies the copied style to another Breadcrumb control. Perfect for maintaining consistency across multiple forms. |
Auto Code Generation |
Changes made in the Smart Tag panel are fully serialized to the designer code, ensuring persistence at runtime. |