Call us on +123 00 456

FAX: 12534

v0.2.2 — Interactive Playground

DWC Mega Menu Pro +

Header Builder

Toggle features, switch modes, and test configurations in real-time.

🖥️

Desktop Options

Desktop-specific features including animation styles, menu modes, hover interactions, visual styling, content positioning, and centered logo functionality.

Animation
Stripe Style: Animated stripe following active dropdown
Adaptive Height: Dynamic header height per dropdown
Note: These two are mutually exclusive
Menu Mode
data-offcanvas: Enable offcanvas navigation
data-flyout-offcanvas: Immediate close (no 200ms delay)
data-offcanvas-hover: Hover on desktop offcanvas (needs flyout)
Interaction & UX
data-toggle: Desktop dropdown trigger (hover/click/both)
data-hover-effect: Nav item hover animation (Default/roll)
data-parent-relative-dropdown: Position dropdown relative to parent
Visual Options
data-caret: Dropdown caret arrow
Dropdown Gap: Distance between header and dropdown (CSS var)
Content Positioning
data-global-content-width: Pixels (1080), CSS var, or selector
data-global-content-vertical: Selector for vertical alignment
Centered Logo
Automatically centers logo with split menu items
Includes force-centering, nudge offset, odd-item handling
Visual debug guide and round-off factor options
📱

Mobile/Offcanvas Options

Mobile-specific features including fullscreen mode, submenu reveal styles, slide-in directions, swipe gestures, tooltips, and back button customization.

Mobile Menu
data-fullscreen-mobile-menu: Full viewport height mobile menu
data-submenu-reveal: Dropdown reveal style (slide/expand)
data-slide-in-direction: Mobile menu entrance edge (right/left/top/bottom)
Mobile UX
swipeToClose: Touch swipe gesture to close menu
toolTip: Swipe-to-close hint tooltip
data-mobile-top-transparent: Transparent close bar over header
backButtonStyle: Back button text format (title/back-to)
data-back-text: Back button text source (default/auto/custom)
🔄

Both (Desktop & Mobile)

Features that apply to both desktop and mobile viewports, including close behavior and visual styling options.

Close Behavior
closeNavOnClick: Close menu on link click
closeOnHashClickOnly: Only close on #hash link clicks
closeOnMobileOnly: Close on mobile viewports only
Visual Options
data-hide-overlay: Hide page overlay on dropdown open
data-last-item-is-button: Style last item(s) as button (1-3 buttons)
data-last-item-is-button-alignment: Button alignment (left/center/right)
data-align-dropdown-top: Align nested dropdown to list top
🎯

Header Options

Control header behavior including sticky positioning, scroll visibility states, and overlay header styling with custom properties for width, blur, inset, radius, and shadow.

Sticky Header
data-sticky-header: Enable sticky header positioning
Scroll Visibility
Scroll Down Visibility: Header behavior when scrolling down
(Default/Hide Row 1-3/Show only Row 1-3/Hide All Rows)
Scroll Up Visibility: Header behavior when scrolling up
(Default/Reverse/Show Row 1-3)
Overlay Header
data-overlay-header: Enable overlay header mode
Customizable CSS properties:
Width, Inset, Blur, Border Radius, Shadow
ℹ️

About This Demo

This interactive demo allows you to test every configuration option in real-time. Changes are applied instantly with full menu reinitialization. The control panel remembers page-load defaults and can reset all settings with one click. Open the control panel to explore all available options, organized by Desktop, Mobile, Both, and Header categories.