Menu Wrapper (Component)

The Menu Wrapper component is the primary controller for layout transitions between desktop and mobile views. It manages breakpoint-specific logic, repositions the menu in the DOM for off‑canvas behavior, and keeps its state synchronized with the document body.

Core Behaviors

1. Breakpoint Management

The component uses Mobile Breakpoint prop to manage mobile breakpoint. It automatically applies state classes to the wrapper:

• Adds .mobile and removes .desktop when below the breakpoint.

• Adds .desktop and removes .mobile when above the breakpoint.

2. Mobile Modes

Depending on the Mobile Menu Mode component prop, additional classes and logic are applied:

• Off Canvas Mode:

  • Creates an Off Canvas effect for the mobile menu

  • Adds ‎.off-canvas-mode and moves the menu wrapper in the DOM so it becomes a sibling of the header inner element. This ensures correct overlay positioning.

• Reveal Mode:

  • Creates a revealing effect for the mobile menu where it reveals itself below the header.

  • Adds ‎.reveal-mode without changing the menu wrapper’s position in the DOM.

3. DOM Restoration

When returning to the desktop view, the component automatically moves the menu wrapper back to its original position in the DOM, using its location at initialization as the reference.

Component Properties

The Menu Wrapper exposes a set of component properties that control dropdown behavior and the mobile version of the menu.

Property	Description	Accepted Value	Required
Desktop Dropdown Interaction	Choice of how dropdown interacts on desktop	Select: Hover, Hover & Click	Yes
Mobile Breakpoint	At what breakpoint should the menu change to mobile	px	Yes
Mobile Dropdown Mode	Choice of how dropdowns should interact on mobile devices	Select: Accordion, Stacked	Yes
Mobile Menu Mode	Choice of how the entire menu should interact on mobile devices	Select: Off Canvas, Reveal	Yes
Mobile Menu Transition Duration	How fast the mobile menu should transition	CSS timing duration	Yes
Mobile Off Canvas Backdrop	While in Off Canvas Menu Mode; this adds a backdrop to the off canvas menu.	Toggle	No
Mobile Backrdop Color	Sets the color of the backdrop if enabled	CSS background color	No
Mobile Backdrop Opacity	Sets the opacity of the backdrop if enabled	Percentage Value	No
Mobile Off Canvas Animation Direction	When in Off Canvas Mode this sets the direction in which the off canvas menu will come in from.	Select: From Right, From Left, From Top, From Bottom	No

Dependencies

• Header Inner: The component requires an element with ‎data-menu-element="header-inner" as a reference point for DOM movement in mobile mode.

---

Available CSS Variables

Use the following CSS variables to control core styling of elements inside the menu wrapper without needing to override selector specificity.

Variable	Description
--mobile-menu-padding-inline	Changes the inline padding used in the mobile menu. Use this for custom elements to keep spacing consistent.
--mobile-menu-padding-block	changes the block padding used throughoutt the mobile menu. can be used for custom elements to create consistency
--mobile-menu-bg-color	sets the background color for the mobile menu
--mobile-menu-width	sets the max width for the mobile menu when its in Off Canvas Mode
--mobile-menu-dropdown-stacked-timing	sets the timing function for the stacked dropdown animation

Helper Classes

The menu wrapper comes with two additional helper classes to help you hide content inside of the Menu Wrapper Component.

Class	Description
.hide-from-desktop-menu	Hides the element from the desktop breakpoint of the menu.
.hide-from-mobile-menu	Hides the element from the Mobile breakpoint of the menu.