Horizontal navigation menu | Custom Web Control | WinCC Unified & V8

Custom Web Control

About Horizontal navigation menu

The Horizontal navigation menu is a high-performance Custom Web Control (CWC) engineered to provide a modern, intuitive user interface for industrial SCADA systems. It features a sophisticated sliding indicator that provides clear visual feedback to operators, ensuring they always know which process view or screen is currently active within the HMI environment.

Key Features

• Dynamic Menu Generation: Buttons are automatically created based on the menuItems array property.
• Visual Feedback: A smooth sliding indicator highlights the current selection for enhanced usability.
• Event-Driven Logic: The SelectionChanged event allows for seamless integration with WinCC screen navigation scripts.
• Industrial Design: Optimized for high-contrast visibility in demanding control room environments.
• Simplify the complex screen navigation of WinCC Unified with an easy to use control for the horizontal menu

Customization

Engineers have full control over the aesthetic and functional aspects of the component through 11 adjustable properties. You can define the backgroundColor, activeColor, and inactiveColor to align with your project design standards. Text visibility is managed via textActiveColor and textInactiveColor. For precise layout integration, the buttonWidth, buttonHeight, borderRadius, and gap between items are fully configurable. The activeIndex property ensures the menu remains synchronized with the current system state.

Use Cases

This control is ideal for multi-screen machine interfaces, process area selection in plant overviews, and tabbed navigation in diagnostic dashboards. It is particularly effective for touch-screen operator panels where large, clear hit-zones are required.

Compatibility

Works seamlessly with WinCC Unified (TIA Portal) and WinCC V8. The control is designed to be lightweight and responsive across various hardware platforms.

⚠️ AI-Generated: This custom web control was automatically generated using AI. Please test and validate all functionality before deploying in production environments.

⚠️ AI-Generated: This custom web control was automatically generated using AI technology. It may contain errors or unexpected behavior. Users are responsible for testing and validating before using in production environments.