Direct preview v1.4.1

X Mega Menu JS Library Demos

Hover the top navigation to open a full-width menu, follow a nested path to drill deeper, or open the side menu to test responsive navigation at any viewport size.

View interaction stage

01 / Playground

Move through the states

Desktop mode

01Hover Explore for the mega panel.

02Click a nested row to open a deeper level.

03Use Open side menu for the drawer.

04Switch direction in the live options below.

Waiting for interaction DesktopresponseWidth 920px

02 / Behavior map

One menu, two surfaces

Use the real navigation above. These compact frames show the two main layouts at a glance.

Desktop / HoverA—01

Desktop mega panel

Hover a section, then choose a nested row to expose the next level inside the same surface.

Responsive / Slide-inB—02

Responsive side menu

Open the drawer, move forward through submenus, and use the back control to return to the previous level.

03 / Runtime

Live options

LTR direction

Responsive breakpoint920px

Top barfixed

Blur effecton

Reset on closeon

Parent linksguarded

Callbacks2 active

Direction changes reload this same direct preview.