BeepSideMenu

Overview

BeepSideMenu provides a modern, customizable side navigation experience for WinForms applications. It supports hierarchical menu items, icons, grouping, and dynamic updates, making it ideal for application navigation and dashboards.

Built on the BeepControl foundation, BeepSideMenu features smooth expand/collapse animations, multi-level menu hierarchies, icon integration, theme awareness, and seamless integration with application layouts. Perfect for desktop applications, administrative interfaces, and modern navigation-heavy applications.

Key Features

Visual Preview

Expanded Side Menu

Collapsed Side Menu

Basic Usage

// Create and configure a BeepSideMenu
var sideMenu = new BeepSideMenu();
sideMenu.Theme = "Dark";
sideMenu.Dock = DockStyle.Left;
sideMenu.Width = 220;

// Add menu items
sideMenu.Items.Add(new BeepSideMenuItem {
    Text = "Dashboard",
    Icon = Properties.Resources.DashboardIcon,
    Tag = "dashboard"
});
sideMenu.Items.Add(new BeepSideMenuItem {
    Text = "Reports",
    Icon = Properties.Resources.ReportIcon,
    Tag = "reports"
});

// Handle selection
sideMenu.ItemSelected += (s, e) =>
{
    // Navigate to selected section
    NavigateTo(e.SelectedItem.Tag.ToString());
};

// Add to form
this.Controls.Add(sideMenu);

// Create main navigation section
var navigationGroup = new BeepSideMenuGroup
{
    Title = "NAVIGATION",
    IsCollapsible = false
};

// Dashboard item
var dashboardItem = new BeepSideMenuItem
{
    Text = "Dashboard",
    Icon = "dashboard.svg",
    Tag = "dashboard"
};
navigationGroup.Items.Add(dashboardItem);

// Reports with submenu
var reportsItem = new BeepSideMenuItem
{
    Text = "Reports",
    Icon = "reports.svg",
    IsExpandable = true
};

reportsItem.SubItems.Add(new BeepSideMenuItem
{
    Text = "Sales Reports",
    Tag = "reports-sales"
});
reportsItem.SubItems.Add(new BeepSideMenuItem
{
    Text = "User Analytics",
    Tag = "reports-users"
});

navigationGroup.Items.Add(reportsItem);

// Add group to side menu
sideMenu.Groups.Add(navigationGroup);

Properties

Core Properties

Layout Properties

Appearance Properties

Events

Examples

public void CreateApplicationSideMenu()
{
    var sideMenu = new BeepSideMenu
    {
        Dock = DockStyle.Left,
        Theme = "Professional",
        ShowToggleButton = true,
        ExpandedWidth = 250,
        CollapsedWidth = 60
    };

    // Main navigation group
    var mainNav = new BeepSideMenuGroup { Title = "NAVIGATION" };
    
    mainNav.Items.AddRange(new[]
    {
        new BeepSideMenuItem
        {
            Text = "Dashboard",
            Icon = "dashboard.svg",
            Tag = "dashboard",
            IsSelected = true
        },
        new BeepSideMenuItem
        {
            Text = "Users",
            Icon = "users.svg",
            Tag = "users",
            Badge = "12",
            BadgeColor = Color.Red
        },
        CreateReportsMenuItem(),
        new BeepSideMenuItem
        {
            Text = "Analytics",
            Icon = "analytics.svg",
            Tag = "analytics"
        }
    });

    // Tools group
    var toolsNav = new BeepSideMenuGroup { Title = "TOOLS" };
    
    toolsNav.Items.AddRange(new[]
    {
        new BeepSideMenuItem
        {
            Text = "Settings",
            Icon = "settings.svg",
            Tag = "settings"
        },
        new BeepSideMenuItem
        {
            Text = "Help",
            Icon = "help.svg",
            Tag = "help"
        }
    });

    sideMenu.Groups.Add(mainNav);
    sideMenu.Groups.Add(toolsNav);

    // Handle navigation
    sideMenu.ItemSelected += SideMenu_ItemSelected;
    sideMenu.MenuToggled += SideMenu_MenuToggled;

    this.Controls.Add(sideMenu);
}

private BeepSideMenuItem CreateReportsMenuItem()
{
    var reportsItem = new BeepSideMenuItem
    {
        Text = "Reports",
        Icon = "reports.svg",
        IsExpandable = true
    };

    reportsItem.SubItems.AddRange(new[]
    {
        new BeepSideMenuItem
        {
            Text = "Sales Reports",
            Tag = "reports-sales"
        },
        new BeepSideMenuItem
        {
            Text = "User Analytics",
            Tag = "reports-users"
        },
        new BeepSideMenuItem
        {
            Text = "Performance",
            Tag = "reports-performance"
        }
    });

    return reportsItem;
}

private void SideMenu_ItemSelected(object sender, SideMenuItemEventArgs e)
{
    var selectedTag = e.SelectedItem.Tag?.ToString();
    
    // Navigate to appropriate view
    switch (selectedTag)
    {
        case "dashboard":
            ShowDashboard();
            break;
        case "users":
            ShowUsersView();
            break;
        case "reports-sales":
            ShowSalesReports();
            break;
        case "settings":
            ShowSettings();
            break;
        default:
            MessageBox.Show($"Navigation to '{selectedTag}' not implemented yet.");
            break;
    }
}

Theming

BeepSideMenu provides comprehensive theming support with specialized navigation styling:

var sideMenu = new BeepSideMenu
{
    Theme = "DarkTheme",
    UseThemeColors = true
};

// Theme automatically applies:
// - SideMenuBackColor: Main menu background
// - SideMenuForeColor: Text and icon colors
// - SideMenuSelectedBackColor: Selected item background
// - SideMenuHoverBackColor: Hover effects
// - SideMenuBorderColor: Borders and dividers

// Apply theme manually if needed
sideMenu.ApplyTheme();

Navigation-Specific Theming

• Group headers - Styled section titles with theme colors
• Item states - Normal, hover, selected, and disabled states
• Badges - Notification badges with customizable colors
• Expand indicators - Theme-aware chevron and expand icons

Best Practices

🎯 User Experience

• Logical grouping: Group related navigation items for clarity
• Meaningful icons: Use consistent, recognizable icons
• Visual hierarchy: Use section headers and proper spacing
• Collapse consideration: Ensure collapsed state remains functional

🔧 Implementation

• Integrate with BeepAppBar: Create seamless header/sidebar experience
• Handle state persistence: Remember collapsed/expanded state
• Support keyboard navigation: Implement arrow key navigation
• Badge updates: Keep notification badges current

📱 Responsive Design

• Auto-collapse: Consider auto-collapse on smaller screens
• Touch-friendly: Ensure adequate touch targets
• Overlay mode: Support overlay mode for mobile-like experiences