Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Breadcrumb

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

NavigateTo(title, view, tag)
// 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);
}
Primary method for Smart Navigation. Pushes a new view onto the stack.
ResetTo(title, view, tag)
// 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());
SetPath(string, char)
// 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.

NodeClicked (Modern)
// 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();
    }
};
ItemClicked (Legacy)
// 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.

C# - Smart Setup
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.

C# - Manual Path
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.