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.