Siticone Navbar

The SiticoneNavbar is an advanced vertical sidebar control for navigation in modern Windows Forms applications. It features a collapsible layout, smooth animations, gradient indicators, categorized sections, and support for icons, making it ideal for dashboard designs.

Layout & Behavior

Core properties controlling the orientation, expansion, and responsiveness of the sidebar.

Property	Type	Description & Usage Example
`Orientation`	Enum	navbar.Orientation = Orientation.Vertical; Sets whether items stack vertically (sidebar) or horizontally (toolbar).
`IsCollapsed`	bool	navbar.IsCollapsed = true; Toggles the sidebar between expanded (full text) and collapsed (icon only) modes.
`ExpandOnHover`	bool	navbar.ExpandOnHover = true; If true, the sidebar automatically expands when the mouse hovers over it.
`CollapsedWidth`	int	navbar.CollapsedWidth = 60; Width of the control when in collapsed (icon-only) state.
`ExpandedWidth`	int	navbar.ExpandedWidth = 220; Width of the control when fully expanded.

Styling & Appearance

Customize the colors, fonts, and visual effects of the navigation buttons.

Property	Type	Description & Usage Example
`SidebarBackColor`	Color	navbar.SidebarBackColor = Color.FromArgb(30, 30, 35);
`SelectedButtonBackColor`	Color	navbar.SelectedButtonBackColor = Color.FromArgb(50, 50, 55);
`UnselectedButtonForeColor`	Color	navbar.UnselectedButtonForeColor = Color.Gray;
`SelectedButtonForeColor`	Color	navbar.SelectedButtonForeColor = Color.White;
`MaterialTabIndicatorPosition`	Enum	navbar.MaterialTabIndicatorPosition = IndicatorPosition.Left; Position of the active tab indicator line (Left, Right, Top, Bottom).

Gradient Indicator

Advanced styling for the active tab indicator, supporting multi-color gradients.

Property	Type	Description & Usage Example
`UseGradientIndicator`	bool	navbar.UseGradientIndicator = true;
`IndicatorGradientStartColor`	Color	navbar.IndicatorGradientStartColor = Color.Cyan;
`IndicatorGradientEndColor`	Color	navbar.IndicatorGradientEndColor = Color.Magenta;
`IndicatorGradientType`	Enum	navbar.IndicatorGradientType = NavGradientType.Vertical; Direction of the gradient fill.

Sections & Headers

Organize navigation items into logical groups with headers.

C# - Adding Sections

// Enable section headers first
navbar.ShowTitleSections = true;

// Add a section header at position 0 (top)
navbar.TitleSections.Add(new TitleSection("MAIN MENU") { Position = 0 });

// Add items that belong to the first section
navbar.Items.Add(new NavBarItem("Dashboard"));
navbar.Items.Add(new NavBarItem("Analytics"));

// Add another section header at position 2
navbar.TitleSections.Add(new TitleSection("SETTINGS") { Position = 2 });

// Add items for the second section
navbar.Items.Add(new NavBarItem("Profile"));
navbar.Items.Add(new NavBarItem("Logout"));

Events

Event	Description
`SelectedItemChanged`	Fired when a new navigation item is selected. Args: `SelectedIndex`, `SelectedText`, `SelectedTag`.
`ButtonClick`	Fired when any button is clicked (even if already selected).
`ButtonHover`	Fired when the mouse enters or leaves a button area.

Detailed Usage Examples

Example 1: Setup a Modern Dashboard Sidebar

Configures a dark-themed sidebar with icons and a collapse button.

C# - Dashboard Setup

private void InitializeSidebar()
{
    navbar.Dock = DockStyle.Left;
    navbar.Width = 220;
    
                // Dark Theme Colors
    navbar.SidebarBackColor = Color.FromArgb(30, 30, 35);
    navbar.UnselectedButtonForeColor = Color.Gray;
    navbar.SelectedButtonForeColor = Color.White;
    navbar.SelectedButtonBackColor = Color.FromArgb(50, 50, 60);
    
                // Collapse Settings
    navbar.ShowCollapseButton = true;
    navbar.CollapsedWidth = 60;
    navbar.ExpandedWidth = 220;
    navbar.ExpandOnHover = false; // Manual toggle only
    
                // Add Items with Icons
    navbar.Items.Add(new NavBarItem("Home", Properties.Resources.HomeIcon));
    navbar.Items.Add(new NavBarItem("Users", Properties.Resources.UserIcon));
    navbar.Items.Add(new NavBarItem("Reports", Properties.Resources.GraphIcon));
}

Example 2: Gradient Indicator Styling

Sets up a vibrant vertical indicator bar using a preset gradient.

C# - Gradient Indicator

private void SetupIndicator()
{
    navbar.ButtonStyle = NavBarStyle.MaterialTabs;
    navbar.MaterialTabIndicatorPosition = IndicatorPosition.Left;
    navbar.SelectedIndicatorThickness = 4;
    
                // Enable Gradient
    navbar.SetIndicatorGradientPreset(GradientPreset.PurpleToRed);
    navbar.UseGradientIndicator = true;
    navbar.IndicatorGradientType = NavGradientType.Vertical;
    
                // Ensure indicator has rounded corners
    navbar.IndicatorCornerRadius = 2;
}

Example 3: Handling Navigation

Using the SelectedItemChanged event to switch views in a content panel.

C# - Navigation Logic

private void siticoneNavbar1_SelectedItemChanged(object sender, NavBarSelectionEventArgs e)
{
                // Hide all user controls first
    foreach (Control ctrl in panelContent.Controls)
    {
        ctrl.Visible = false;
    }

                // Show the selected one based on tag or text
                string viewName = e.SelectedText;
    
                if (panelContent.Controls.ContainsKey(viewName))
    {
        panelContent.Controls[viewName].Visible = true;
    }
                else
    {
                // Load view dynamically if not present
                LoadView(viewName); 
    }
    
                Console.WriteLine($"Navigated to: {e.SelectedText} at index {e.SelectedIndex}");
}