Menu Wrapper API

Dispatched Events

The component dispatches these custom events from its own element when the breakpoint state changes:

Event Name	Detail	Description
menuWrapper:mobile	None	Fired when entering mobile view.
menuWrapper:desktop	None	Fired when entering desktop view.

---

Examples

Detecting Mobile/Desktop Transitions

const menuWrapper = document.querySelector('[data-menu-element="menu-wrapper"]');

// Listen for mobile view entry
menuWrapper.addEventListener("menuWrapper:mobile", () => {
  console.log("Switched to mobile view");
  
  // Example: Initialize mobile-specific features
  initMobileGestures();
});

// Listen for desktop view entry
menuWrapper.addEventListener("menuWrapper:desktop", () => {
  console.log("Switched to desktop view");
  
  // Example: Clean up mobile features
  destroyMobileGestures();
});

Checking Current Viewport State

const menuWrapper = document.querySelector('[data-menu-element="menu-wrapper"]');

// Check if currently in mobile view
function isMobileView() {
  return menuWrapper.classList.contains("mobile");
}

// Check if currently in desktop view
function isDesktopView() {
  return menuWrapper.classList.contains("desktop");
}

// Check mobile menu mode
function getMobileMode() {
  if (menuWrapper.classList.contains("off-canvas-mode")) {
    return "off-canvas";
  } else if (menuWrapper.classList.contains("reveal-mode")) {
    return "reveal";
  }
  return null; // Desktop mode
}

// Example usage
if (isMobileView()) {
  console.log(`Mobile mode: ${getMobileMode()}`);
}

Integration with Toggle Component

const menuWrapper = document.querySelector('[data-menu-element="menu-wrapper"]');

// Listen for menu open/close via Toggle component
menuWrapper.addEventListener("toggle:change", (e) => {
  const { id, isEnabled } = e.detail;
  
  if (isEnabled) {
    console.log("Menu opened");
    // Track analytics, pause videos, etc.
  } else {
    console.log("Menu closed");
    // Resume content, clean up state
  }
});

// Programmatically control the menu via Toggle API
const menuToggle = window.Toggles.findByTarget("main-nav")[0];

// Open the mobile menu
menuToggle.enable();

// Close the mobile menu
menuToggle.disable();

// Check if menu is open
if (menuToggle.isEnabled) {
  console.log("Menu is currently open");
}

Responsive Behavior Coordination

const menuWrapper = document.querySelector('[data-menu-element="menu-wrapper"]');

// Close mobile menu when switching to desktop
menuWrapper.addEventListener("menuWrapper:desktop", () => {
  // Find all toggles targeting this menu and disable them
  const toggles = window.Toggles.findByTarget(menuWrapper.id);
  toggles.forEach(toggle => {
    if (toggle.isEnabled) {
      toggle.disable();
    }
  });
  
  // Remove body scroll lock if present
  document.body.classList.remove("menu-open", "scroll-locked");
});

// Coordinate with dropdown mode changes
document.addEventListener("menuDropdown:modeChange", (e) => {
  const { newMode } = e.detail;
  
  // When dropdowns switch to stacked mode, we're in mobile
  if (newMode === "stacked") {
    console.log("Dropdowns now in stacked mobile mode");
  }
});