# 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                                                     | <p>Select: <br>Hover, Hover & Click</p>              | 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                                 | <p>Select: <br>Off Canvas, <br>Reveal</p>            | 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.  |

## Additional Helper Variables

There are a few additional helper variables that are included inside the CSS for the Menu Wrapper Component.

| Variable               | Description                                                                                  |
| ---------------------- | -------------------------------------------------------------------------------------------- |
| --link-color           | Sets the color of top level links and links inside of none mega menu links.                  |
| --link-color-hover     | Sets the hover color of top level links and links inside of none mega menu links.            |
| --link-bg-color        | Sets the background color of top level links and links inside of none mega menu links.       |
| --link-bg-color-hover  | Sets the hover background color of top level links and links inside of none mega menu links. |
| --link-font-weight     | Sets the font weight of top level links and links inside of none mega menu links.            |
| --link-transition      | Sets the transition of top level links and links inside of none mega menu links.             |
| --link-color-active    | Sets the color of the link when its the currently active page link.                          |
| --link-bg-color-active | Sets the background of the link when its the currently active page link.                     |