@schukai/monster 4.43.4 → 4.43.5

package/source/components/navigation/site-navigation.mjs

@@ -1,5 +1,5 @@
 /**
- * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Copyright © schukai GmbH and all contributing authors, 2025. All rights reserved.
  * Node module: @schukai/monster
  *
  * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
@@ -13,20 +13,22 @@
  */
 
 import {
-	CustomElement,
-	getSlottedElements,
-	registerCustomElement,
-	assembleMethodSymbol,
+  CustomElement,
+  getSlottedElements,
+  registerCustomElement,
+  assembleMethodSymbol,
 } from "../../dom/customelement.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { SiteNavigationStyleSheet } from "./stylesheet/site-navigation.mjs";
 import {
-	computePosition,
-	autoUpdate,
-	flip,
-	shift,
-	offset,
+  computePosition,
+  autoUpdate,
+  flip,
+  shift,
+  offset,
+  size,
 } from "@floating-ui/dom";
+import { fireCustomEvent } from "../../dom/events.mjs";
 
 export { SiteNavigation };
 
@@ -39,421 +41,614 @@ const hamburgerButtonSymbol = Symbol("hamburgerButton");
 const hamburgerNavSymbol = Symbol("hamburgerNav");
 const instanceSymbol = Symbol("instanceSymbol");
 const activeSubmenuHiderSymbol = Symbol("activeSubmenuHider");
+const hideHamburgerMenuSymbol = Symbol("hideHamburgerMenu");
+const hamburgerCloseButtonSymbol = Symbol("hamburgerCloseButton");
 
 /**
- * Responsive site navigation component.
+ * A responsive site navigation that automatically moves menu items into a hamburger menu
+ * when there isn't enough available space.
  *
+ * @summary An adaptive navigation component that supports hover and click interactions for submenus.
  * @fragments /fragments/components/navigation/site-navigation/
  *
- * @example /examples/components/navigation/site-navigation-simple
+ * @example /examples/components/navigation/site-navigation-simple Simple Navigation
+ * @example /examples/components/navigation/site-navigation-with-submenus Navigation with Submenus
+ * @example /examples/components/navigation/site-navigation-with-mega-menu Navigation with Mega Menu
  *
- * @since 4.41.0
- * @copyright schukai GmbH
- * @summary Responsive site navigation with hamburger menu and submenus
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/336.html
+ *
+ * @fires monster-layout-change - Fired when the layout of menu items changes. The event detail contains `{visibleItems, hiddenItems}`.
+ * @fires monster-hamburger-show - Fired when the hamburger menu is shown. The event detail contains `{button, menu}`.
+ * @fires monster-hamburger-hide - Fired when the hamburger menu is hidden. The event detail contains `{button, menu}`.
+ * @fires monster-submenu-show - Fired when a submenu is shown. The event detail contains `{context, trigger, submenu, level}`.
+ * @fires monster-submenu-hide - Fired when a submenu is hidden. The event detail contains `{context, trigger, submenu, level}`.
  */
 class SiteNavigation extends CustomElement {
-	/**
-	 * Returns a unique symbol for the instance.
-	 * @returns {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/navigation/site@@instance");
-	}
-
-	/**
-	 * Returns the default options for the component.
-	 * @returns {object}
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: { main: getTemplate() },
-		});
-	}
-
-	/**
-	 * Assembles the component and initializes controls and event handlers.
-	 * @returns {void}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-	}
-
-	/**
-	 * Returns the CSS stylesheet for the component.
-	 * @returns {Array<CSSStyleSheet>}
-	 */
-	static getCSSStyleSheet() {
-		return [SiteNavigationStyleSheet];
-	}
-
-	/**
-	 * Returns the custom element tag name.
-	 * @returns {string}
-	 */
-	static getTag() {
-		return "monster-site-navigation";
-	}
-
-	/**
-	 * Called when the component is connected to the DOM.
-	 * @returns {void}
-	 */
-	connectedCallback() {
-		super.connectedCallback();
-		attachResizeObserver.call(this);
-		setTimeout(() => populateTabs.call(this), 0);
-	}
-
-	/**
-	 * Called when the component is disconnected from the DOM.
-	 * @returns {void}
-	 */
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		detachResizeObserver.call(this);
-	}
+  static get [instanceSymbol]() {
+    return Symbol.for("@schukai/monster/components/navigation/site@@instance");
+  }
+
+  /**
+   * Configuration options for the SiteNavigation component.
+   * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+   *
+   * To set these options via an HTML tag, use the `data-monster-options` attribute.
+   * The individual configuration values are detailed in the table below.
+   *
+   * @property {Object} templates - Template definitions.
+   * @property {string} templates.main - The main HTML template for the component.
+   * @property {string} interactionModel="auto" - Defines the interaction with submenus. Possible values: `auto`, `click`, `hover`. With `auto`, `hover` is used on desktop and `click` is used in the hamburger menu.
+   * @property {Object} features - Container for additional feature flags.
+   * @property {boolean} features.resetOnClose=true - If `true`, all open submenus within the hamburger menu will be reset when it is closed.
+   */
+  get defaults() {
+    return Object.assign({}, super.defaults, {
+      templates: { main: getTemplate() },
+      interactionModel: "auto", // 'auto', 'click', 'hover'
+      features: {
+        resetOnClose: true,
+      },
+    });
+  }
+
+  [assembleMethodSymbol]() {
+    super[assembleMethodSymbol]();
+    initControlReferences.call(this);
+    initEventHandler.call(this);
+  }
+
+  static getCSSStyleSheet() {
+    return [SiteNavigationStyleSheet];
+  }
+
+  static getTag() {
+    return "monster-site-navigation";
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    attachResizeObserver.call(this);
+    setTimeout(() => populateTabs.call(this), 0);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    detachResizeObserver.call(this);
+  }
 }
 
 /**
- * Initializes references to important control elements.
+ * Queries the shadow DOM for essential elements and stores their references.
  * @private
  * @this {SiteNavigation}
- * @returns {void}
  */
 function initControlReferences() {
-	if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
-	this[navElementSymbol] = this.shadowRoot.querySelector(
-		'[data-monster-role="navigation"]',
-	);
-	this[visibleElementsSymbol] =
-		this.shadowRoot.querySelector("#visible-elements");
-	this[hiddenElementsSymbol] =
-		this.shadowRoot.querySelector("#hidden-elements");
-	this[hamburgerButtonSymbol] =
-		this.shadowRoot.querySelector("#hamburger-button");
-	this[hamburgerNavSymbol] = this.shadowRoot.querySelector(
-		'[data-monster-role="hamburger-nav"]',
-	);
+  if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
+  this[navElementSymbol] = this.shadowRoot.querySelector(
+    '[data-monster-role="navigation"]',
+  );
+  this[visibleElementsSymbol] =
+    this.shadowRoot.querySelector("#visible-elements");
+  this[hiddenElementsSymbol] =
+    this.shadowRoot.querySelector("#hidden-elements");
+  this[hamburgerButtonSymbol] =
+    this.shadowRoot.querySelector("#hamburger-button");
+  this[hamburgerNavSymbol] = this.shadowRoot.querySelector(
+    '[data-monster-role="hamburger-nav"]',
+  );
+  this[hamburgerCloseButtonSymbol] = this.shadowRoot.querySelector(
+    '[part="hamburger-close-button"]',
+  );
 }
 
 /**
- * Initializes event handlers for hamburger menu and submenu interactions.
+ * Initializes event handlers for the hamburger menu button and its functionality.
  * @private
  * @this {SiteNavigation}
- * @returns {void}
  */
 function initEventHandler() {
-	if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
-
-	const hamburgerButton = this[hamburgerButtonSymbol];
-	const hamburgerNav = this[hamburgerNavSymbol];
-	let cleanup;
-
-	if (!hamburgerButton || !hamburgerNav) return;
-
-	const showMenu = () => {
-		hamburgerNav.style.display = "block";
-		cleanup = autoUpdate(hamburgerButton, hamburgerNav, () => {
-			computePosition(hamburgerButton, hamburgerNav, {
-				placement: "bottom-end",
-				middleware: [offset(8), flip(), shift({ padding: 8 })],
-			}).then(({ x, y }) => {
-				Object.assign(hamburgerNav.style, {
-					left: `${x}px`,
-					top: `${y}px`,
-				});
-			});
-		});
-		setTimeout(() => document.addEventListener("click", handleOutsideClick), 0);
-	};
-
-	const hideMenu = () => {
-		hamburgerNav.style.display = "none";
-		if (cleanup) {
-			cleanup();
-		}
-		document.removeEventListener("click", handleOutsideClick);
-	};
-
-	const handleOutsideClick = (event) => {
-		if (
-			!hamburgerButton.contains(event.target) &&
-			!hamburgerNav.contains(event.target)
-		) {
-			hideMenu();
-		}
-	};
-
-	hamburgerButton.addEventListener("click", (event) => {
-		event.stopPropagation();
-		const isVisible = hamburgerNav.style.display === "block";
-		if (isVisible) {
-			hideMenu();
-		} else {
-			showMenu();
-		}
-	});
+  if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
+
+  const hamburgerButton = this[hamburgerButtonSymbol];
+  const hamburgerNav = this[hamburgerNavSymbol];
+  const hamburgerCloseButton = this[hamburgerCloseButtonSymbol];
+  let cleanup;
+
+  if (!hamburgerButton || !hamburgerNav || !hamburgerCloseButton) return;
+
+  const handleOutsideClick = (event) => {
+    if (
+      !hamburgerButton.contains(event.target) &&
+      !hamburgerNav.contains(event.target)
+    ) {
+      hideMenu();
+    }
+  };
+
+  const hideMenu = () => {
+    hamburgerNav.style.display = "none";
+    document.body.classList.remove("monster-navigation-open");
+
+    fireCustomEvent(this, "monster-hamburger-hide", {
+      button: hamburgerButton,
+      menu: hamburgerNav,
+    });
+
+    if (this.getOption("features.resetOnClose") === true) {
+      this[hiddenElementsSymbol]
+        .querySelectorAll(".is-open")
+        .forEach((submenu) => submenu.classList.remove("is-open"));
+    }
+
+    if (cleanup) {
+      cleanup();
+      cleanup = undefined;
+    }
+    document.removeEventListener("click", handleOutsideClick);
+  };
+
+  this[hideHamburgerMenuSymbol] = hideMenu;
+
+  const showMenu = () => {
+    this[activeSubmenuHiderSymbol]?.();
+    hamburgerNav.style.display = "block";
+    document.body.classList.add("monster-navigation-open");
+
+    fireCustomEvent(this, "monster-hamburger-show", {
+      button: hamburgerButton,
+      menu: hamburgerNav,
+    });
+
+    cleanup = autoUpdate(hamburgerButton, hamburgerNav, () => {
+      // Desktop view where the hamburger menu is a dropdown
+      if (window.innerWidth > 768) {
+        computePosition(hamburgerButton, hamburgerNav, {
+          placement: "bottom-end",
+          strategy: "fixed",
+          middleware: [
+            offset(8),
+            flip(),
+            shift({ padding: 8 }),
+            size({
+              apply: ({ availableHeight, elements }) => {
+                Object.assign(elements.floating.style, {
+                  maxHeight: `${availableHeight}px`,
+                  overflowY: "auto",
+                });
+              },
+              padding: 8,
+            }),
+          ],
+        }).then(({ x, y, strategy }) => {
+          Object.assign(hamburgerNav.style, {
+            position: strategy,
+            left: `${x}px`,
+            top: `${y}px`,
+          });
+        });
+      } else {
+        // Mobile view (fullscreen overlay), position is handled by CSS
+        Object.assign(hamburgerNav.style, { position: "", left: "", top: "" });
+      }
+    });
+    setTimeout(() => document.addEventListener("click", handleOutsideClick), 0);
+  };
+
+  hamburgerButton.addEventListener("click", (event) => {
+    event.stopPropagation();
+    const isVisible = hamburgerNav.style.display === "block";
+    if (isVisible) {
+      hideMenu();
+    } else {
+      showMenu();
+    }
+  });
+
+  hamburgerCloseButton.addEventListener("click", (event) => {
+    event.stopPropagation();
+    hideMenu();
+  });
 }
 
 /**
- * Attaches a ResizeObserver to re-calculate tabs when the component's size changes.
+ * Attaches a ResizeObserver to the main navigation element to recalculate
+ * tab distribution on size changes. A DeadMansSwitch is used for debouncing.
  * @private
  * @this {SiteNavigation}
- * @returns {void}
  */
 function attachResizeObserver() {
-	this[resizeObserverSymbol] = new ResizeObserver(() => {
-		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
-			try {
-				this[timerCallbackSymbol].touch();
-				return;
-			} catch (e) {
-				delete this[timerCallbackSymbol];
-			}
-		}
-		this[timerCallbackSymbol] = new DeadMansSwitch(200, () =>
-			populateTabs.call(this),
-		);
-	});
-	this[resizeObserverSymbol].observe(this[navElementSymbol]);
+  this[resizeObserverSymbol] = new ResizeObserver(() => {
+    if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
+      try {
+        this[timerCallbackSymbol].touch();
+        return;
+      } catch (e) {
+        delete this[timerCallbackSymbol];
+      }
+    }
+    this[timerCallbackSymbol] = new DeadMansSwitch(200, () =>
+      populateTabs.call(this),
+    );
+  });
+  this[resizeObserverSymbol].observe(this[navElementSymbol]);
 }
 
 /**
- * Detaches the ResizeObserver when the component is removed from the DOM.
+ * Disconnects and cleans up the ResizeObserver instance.
  * @private
  * @this {SiteNavigation}
- * @returns {void}
  */
 function detachResizeObserver() {
-	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
-		this[resizeObserverSymbol].disconnect();
-		delete this[resizeObserverSymbol];
-	}
+  if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+    this[resizeObserverSymbol].disconnect();
+    delete this[resizeObserverSymbol];
+  }
 }
 
 /**
- * Sets up a submenu based on its context (visible nav or hidden hamburger menu).
+ * Sets up interaction logic (hover or click) for a submenu.
+ * This function is called recursively for nested submenus.
  * @private
  * @this {SiteNavigation}
- * @param {HTMLElement} parentLi The list item that contains the submenu.
- * @param {'visible' | 'hidden'} context The context in which the submenu appears.
- * @returns {void}
+ * @param {HTMLLIElement} parentLi The list item containing the submenu.
+ * @param {'visible'|'hidden'} context The context (main nav or hamburger).
+ * @param {number} level The nesting level of the submenu (starts at 1).
+ */
+function setupSubmenu(parentLi, context = "visible", level = 1) {
+  const submenu = parentLi.querySelector(
+    ":scope > ul, :scope > div[part='mega-menu']",
+  );
+  if (!submenu) return;
+
+  if (submenu.tagName === "UL") {
+    submenu.setAttribute("part", "submenu");
+  }
+
+  const interaction = this.getOption("interactionModel", "auto");
+  const useHover =
+    interaction === "hover" ||
+    (interaction === "auto" && context === "visible");
+
+  if (useHover) {
+    const component = this;
+    let cleanup;
+    let hideTimeout;
+
+    const immediateHide = () => {
+      submenu.style.display = "none";
+      submenu
+        .querySelectorAll(
+          "ul[style*='display: block'], div[part='mega-menu'][style*='display: block']",
+        )
+        .forEach((sub) => {
+          sub.style.display = "none";
+        });
+
+      fireCustomEvent(this, "monster-submenu-hide", {
+        context,
+        trigger: parentLi,
+        submenu,
+        level,
+      });
+
+      if (cleanup) {
+        cleanup();
+        cleanup = null;
+      }
+
+      if (
+        level === 1 &&
+        component[activeSubmenuHiderSymbol] === immediateHide
+      ) {
+        component[activeSubmenuHiderSymbol] = null;
+      }
+    };
+
+    const show = () => {
+      component[hideHamburgerMenuSymbol]?.();
+      clearTimeout(hideTimeout);
+
+      if (level === 1) {
+        if (
+          component[activeSubmenuHiderSymbol] &&
+          component[activeSubmenuHiderSymbol] !== immediateHide
+        ) {
+          component[activeSubmenuHiderSymbol]();
+        }
+        component[activeSubmenuHiderSymbol] = immediateHide;
+      } else {
+        [...parentLi.parentElement.children]
+          .filter((li) => li !== parentLi)
+          .forEach((sibling) => {
+            const siblingSubmenu = sibling.querySelector(
+              ":scope > ul, :scope > div[part='mega-menu']",
+            );
+            if (siblingSubmenu) {
+              siblingSubmenu.style.display = "none";
+            }
+          });
+      }
+
+      submenu.style.display = "block";
+      fireCustomEvent(this, "monster-submenu-show", {
+        context,
+        trigger: parentLi,
+        submenu,
+        level,
+      });
+
+      if (level === 1 && !cleanup) {
+        cleanup = autoUpdate(parentLi, submenu, () => {
+          computePosition(parentLi, submenu, {
+            placement: "bottom-start",
+            strategy: "fixed",
+            middleware: [
+              offset(8),
+              flip({ fallbackPlacements: ["top-start"] }),
+              shift({ padding: 8 }),
+              size({
+                apply: ({ availableHeight, elements }) => {
+                  Object.assign(elements.floating.style, {
+                    maxHeight: `${availableHeight}px`,
+                    overflowY: "auto",
+                  });
+                },
+                padding: 8,
+              }),
+            ],
+          }).then(({ x, y, strategy }) => {
+            Object.assign(submenu.style, {
+              position: strategy,
+              left: `${x}px`,
+              top: `${y}px`,
+            });
+          });
+        });
+      }
+    };
+
+    const hideWithDelay = () => {
+      hideTimeout = setTimeout(immediateHide, 200);
+    };
+
+    parentLi.addEventListener("mouseenter", show);
+    parentLi.addEventListener("mouseleave", hideWithDelay);
+    submenu.addEventListener("mouseenter", () => clearTimeout(hideTimeout));
+    submenu.addEventListener("mouseleave", hideWithDelay);
+  } else {
+    // Click behavior
+    const anchor = parentLi.querySelector(":scope > a");
+    if (anchor) {
+      anchor.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (!submenu.classList.contains("is-open")) {
+          [...parentLi.parentElement.children]
+            .filter((li) => li !== parentLi)
+            .forEach((sibling) => {
+              const siblingSubmenu = sibling.querySelector(
+                ":scope > ul, :scope > div[part='mega-menu']",
+              );
+              if (siblingSubmenu) {
+                siblingSubmenu.classList.remove("is-open");
+              }
+            });
+        }
+
+        const isOpen = submenu.classList.toggle("is-open");
+        const eventName = isOpen
+          ? "monster-submenu-show"
+          : "monster-submenu-hide";
+        fireCustomEvent(this, eventName, {
+          context,
+          trigger: parentLi,
+          submenu,
+          level,
+        });
+      });
+    }
+  }
+
+  // Recursive call for nested lists
+  if (submenu.tagName === "UL") {
+    submenu
+      .querySelectorAll(":scope > li")
+      .forEach((li) => setupSubmenu.call(this, li, context, level + 1));
+  }
+}
+
+/**
+ * Creates a clone of a navigation list item, setting appropriate part attributes
+ * for styling and handling active states.
+ * @private
+ * @param {HTMLLIElement} item The original list item to clone.
+ * @returns {HTMLLIElement} The cloned and configured list item.
  */
-function setupSubmenu(parentLi, context = "visible") {
-	const submenu = parentLi.querySelector("ul");
-	if (!submenu) return;
-
-	submenu.setAttribute("part", "submenu");
-
-	if (context === "visible") {
-		const component = this;
-		let cleanup;
-		let hideTimeout;
-
-		const immediateHide = () => {
-			submenu.style.display = "none";
-			if (cleanup) {
-				cleanup();
-				cleanup = null;
-			}
-			if (component[activeSubmenuHiderSymbol] === immediateHide) {
-				component[activeSubmenuHiderSymbol] = null;
-			}
-		};
-
-		const show = () => {
-			clearTimeout(hideTimeout);
-			if (
-				component[activeSubmenuHiderSymbol] &&
-				component[activeSubmenuHiderSymbol] !== immediateHide
-			) {
-				component[activeSubmenuHiderSymbol]();
-			}
-			submenu.style.display = "block";
-			if (!cleanup) {
-				cleanup = autoUpdate(parentLi, submenu, () => {
-					computePosition(parentLi, submenu, {
-						placement: "bottom-start",
-						middleware: [offset(8), flip(), shift({ padding: 8 })],
-					}).then(({ x, y }) => {
-						Object.assign(submenu.style, { left: `${x}px`, top: `${y}px` });
-					});
-				});
-			}
-			component[activeSubmenuHiderSymbol] = immediateHide;
-		};
-
-		const hideWithDelay = () => {
-			hideTimeout = setTimeout(immediateHide, 200);
-		};
-
-		parentLi.addEventListener("mouseenter", show);
-		parentLi.addEventListener("mouseleave", hideWithDelay);
-		submenu.addEventListener("mouseenter", () => clearTimeout(hideTimeout));
-		submenu.addEventListener("mouseleave", hideWithDelay);
-	} else {
-		submenu.style.display = "none";
-		const anchor = parentLi.querySelector("a");
-		if (anchor) {
-			anchor.addEventListener("click", (event) => {
-				event.preventDefault();
-				event.stopPropagation();
-				const isVisible = submenu.style.display === "block";
-				submenu.style.display = isVisible ? "none" : "block";
-			});
-		}
-	}
+function cloneNavItem(item) {
+  const liClone = item.cloneNode(true);
+  const aClone = liClone.querySelector("a");
+  let navItemPart = "nav-item";
+  let navLinkPart = "nav-link";
+
+  if (item.classList.contains("active")) {
+    navItemPart += " nav-item-active";
+    if (aClone) navLinkPart += " nav-link-active";
+  }
+
+  liClone.setAttribute("part", navItemPart);
+  if (aClone) aClone.setAttribute("part", navLinkPart);
+
+  return liClone;
 }
 
 /**
- * Calculates which navigation items fit in the visible area and moves the rest
- * to a hidden "hamburger" menu.
+ * Measures available space and distributes slotted navigation items between
+ * the visible list and the hidden hamburger menu list.
  * @private
  * @this {SiteNavigation}
- * @returns {void}
  */
 function populateTabs() {
-	const visibleList = this[visibleElementsSymbol];
-	const hiddenList = this[hiddenElementsSymbol];
-	const hamburgerButton = this[hamburgerButtonSymbol];
-	const hamburgerNav = this[hamburgerNavSymbol];
-
-	const topLevelUl = [...getSlottedElements.call(this, "ul")].find(
-		(ul) => ul.parentElement === this,
-	);
-
-	if (!topLevelUl) {
-		visibleList.style.visibility = "visible";
-		hamburgerButton.style.display = "none";
-		return;
-	}
-
-	const sourceItems = Array.from(topLevelUl.children).filter(
-		(item) => item.tagName === "LI",
-	);
-
-	visibleList.style.visibility = "hidden";
-	hamburgerButton.style.display = "none";
-	hamburgerNav.style.display = "none";
-	visibleList.innerHTML = "";
-	hiddenList.innerHTML = "";
-
-	const originalDisplay = hamburgerButton.style.display;
-	hamburgerButton.style.visibility = "hidden";
-	hamburgerButton.style.display = "flex";
-	const hamburgerWidth = hamburgerButton.offsetWidth;
-	hamburgerButton.style.display = originalDisplay;
-	hamburgerButton.style.visibility = "visible";
-
-	const navWidth = this[navElementSymbol].clientWidth;
-	if (navWidth === 0) {
-		visibleList.style.visibility = "visible";
-		return;
-	}
-
-	const measurementList = visibleList.cloneNode(true);
-	Object.assign(measurementList.style, {
-		position: "absolute",
-		left: "0",
-		top: "0",
-		width: "auto",
-		visibility: "hidden",
-	});
-	this.shadowRoot.appendChild(measurementList);
-
-	const itemsToMove = [];
-	const availableWidthForTabs = navWidth - hamburgerWidth;
-
-	for (let i = 0; i < sourceItems.length; i++) {
-		const item = sourceItems[i];
-		const itemClone = item.cloneNode(true);
-		const submenu = itemClone.querySelector("ul");
-		if (submenu) submenu.style.display = "none";
-
-		measurementList.appendChild(itemClone);
-
-		const isLastItem = i === sourceItems.length - 1;
-		const effectiveMaxWidth = isLastItem ? navWidth : availableWidthForTabs;
-
-		if (measurementList.scrollWidth > effectiveMaxWidth) {
-			break;
-		} else {
-			itemsToMove.push(item);
-		}
-	}
-	this.shadowRoot.removeChild(measurementList);
-
-	const visibleItems = itemsToMove;
-	const hiddenItems = sourceItems.slice(visibleItems.length);
-
-	if (visibleItems.length > 0) {
-		const clonedVisibleItems = visibleItems.map((item) => {
-			const liClone = item.cloneNode(true);
-			const aClone = liClone.querySelector("a");
-
-			liClone.setAttribute("part", "nav-item");
-			if (aClone) aClone.setAttribute("part", "nav-link");
-
-			if (item.classList.contains("active")) {
-				liClone.setAttribute("part", "nav-item nav-item-active");
-				if (aClone) aClone.setAttribute("part", "nav-link nav-link-active");
-			}
-			return liClone;
-		});
-		visibleList.append(...clonedVisibleItems);
-		visibleList
-			.querySelectorAll("li")
-			.forEach((li) => setupSubmenu.call(this, li, "visible"));
-	}
-
-	if (hiddenItems.length > 0) {
-		const clonedHiddenItems = hiddenItems.map((item) => {
-			const liClone = item.cloneNode(true);
-			const aClone = liClone.querySelector("a");
-
-			liClone.setAttribute("part", "nav-item");
-			if (aClone) aClone.setAttribute("part", "nav-link");
-			if (item.classList.contains("active")) {
-				liClone.setAttribute("part", "nav-item nav-item-active");
-				if (aClone) aClone.setAttribute("part", "nav-link nav-link-active");
-			}
-			return liClone;
-		});
-		hiddenList.append(...clonedHiddenItems);
-		hamburgerButton.style.display = "flex";
-		hiddenList
-			.querySelectorAll("li")
-			.forEach((li) => setupSubmenu.call(this, li, "hidden"));
-	}
-
-	visibleList.style.visibility = "visible";
+  const visibleList = this[visibleElementsSymbol];
+  const hiddenList = this[hiddenElementsSymbol];
+  const hamburgerButton = this[hamburgerButtonSymbol];
+  const hamburgerNav = this[hamburgerNavSymbol];
+  const topLevelUl = [...getSlottedElements.call(this, "ul")].find(
+    (ul) => ul.parentElement === this,
+  );
+
+  if (!topLevelUl) {
+    visibleList.style.visibility = "visible";
+    hamburgerButton.style.display = "none";
+    return;
+  }
+
+  const sourceItems = Array.from(topLevelUl.children).filter(
+    (item) => item.tagName === "LI",
+  );
+
+  visibleList.style.visibility = "hidden";
+  hamburgerButton.style.display = "none";
+  hamburgerNav.style.display = "none";
+  visibleList.innerHTML = "";
+  hiddenList.innerHTML = "";
+
+  const originalDisplay = hamburgerButton.style.display;
+  hamburgerButton.style.visibility = "hidden";
+  hamburgerButton.style.display = "flex";
+  const hamburgerWidth = hamburgerButton.offsetWidth;
+  hamburgerButton.style.display = originalDisplay;
+  hamburgerButton.style.visibility = "visible";
+
+  const navWidth = this[navElementSymbol].clientWidth;
+  if (navWidth === 0) {
+    visibleList.style.visibility = "visible";
+    return;
+  }
+
+  const measurementList = visibleList.cloneNode(true);
+  Object.assign(measurementList.style, {
+    position: "absolute",
+    left: "0",
+    top: "0",
+    width: "auto",
+    visibility: "hidden",
+  });
+  this.shadowRoot.appendChild(measurementList);
+
+  const itemsToMove = [];
+  const availableWidthForTabs = navWidth - hamburgerWidth;
+
+  for (let i = 0; i < sourceItems.length; i++) {
+    const item = sourceItems[i];
+    const itemClone = item.cloneNode(true);
+    const submenu = itemClone.querySelector("ul, div[part='mega-menu']");
+    if (submenu) submenu.style.display = "none";
+
+    measurementList.appendChild(itemClone);
+    const isLastItem = i === sourceItems.length - 1;
+    const effectiveMaxWidth = isLastItem ? navWidth : availableWidthForTabs;
+
+    if (measurementList.scrollWidth > effectiveMaxWidth) {
+      break;
+    } else {
+      itemsToMove.push(item);
+    }
+  }
+  this.shadowRoot.removeChild(measurementList);
+
+  const visibleItems = itemsToMove;
+  const hiddenItems = sourceItems.slice(visibleItems.length);
+
+  if (visibleItems.length > 0) {
+    const clonedVisibleItems = visibleItems.map(cloneNavItem);
+    visibleList.append(...clonedVisibleItems);
+    visibleList
+      .querySelectorAll(":scope > li")
+      .forEach((li) => setupSubmenu.call(this, li, "visible", 1));
+  }
+
+  if (hiddenItems.length > 0) {
+    const clonedHiddenItems = hiddenItems.map(cloneNavItem);
+    hiddenList.append(...clonedHiddenItems);
+    hamburgerButton.style.display = "flex";
+    hiddenList
+      .querySelectorAll(":scope > li")
+      .forEach((li) => setupSubmenu.call(this, li, "hidden", 1));
+  }
+
+  visibleList.style.visibility = "visible";
+  fireCustomEvent(this, "monster-layout-change", { visibleItems, hiddenItems });
+}
+
+/**
+ * A simple template literal tag function for clarity.
+ * @private
+ * @param {TemplateStringsArray} strings
+ * @returns {string} The combined string.
+ */
+function html(strings) {
+  return strings.join("");
 }
 
 /**
  * Returns the HTML template for the component's shadow DOM.
  * @private
- * @returns {string}
+ * @returns {string} The HTML template string.
  */
 function getTemplate() {
-	return `
-    <div data-monster-role="control" part="control">
-      <nav data-monster-role="navigation" role="navigation" part="nav">
-        <ul id="visible-elements" part="visible-list"></ul>
-      </nav>
-      <div data-monster-role="hamburger-container" part="hamburger-container">
-          <button id="hamburger-button" part="hamburger-button" aria-label="More navigation items">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
+  return html`<div data-monster-role="control" part="control">
+    <nav data-monster-role="navigation" role="navigation" part="nav">
+      <ul id="visible-elements" part="visible-list"></ul>
+    </nav>
+    <div data-monster-role="hamburger-container" part="hamburger-container">
+      <button
+        id="hamburger-button"
+        part="hamburger-button"
+        aria-label="More navigation items"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"
+          />
+        </svg>
+      </button>
+      <nav
+        data-monster-role="hamburger-nav"
+        role="navigation"
+        part="hamburger-nav"
+        style="display: none;"
+      >
+        <div part="hamburger-header">
+          <button part="hamburger-close-button" aria-label="Close navigation">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
             </svg>
           </button>
-          <nav data-monster-role="hamburger-nav" role="navigation" part="hamburger-nav" style="display: none;">
-            <ul id="hidden-elements" part="hidden-list"></ul>
-          </nav>
-      </div>
-      <slot class="hidden-slot" style="display: none;"></slot>
-    </div>`;
+        </div>
+        <ul id="hidden-elements" part="hidden-list"></ul>
+      </nav>
+    </div>
+    <slot class="hidden-slot" style="display: none;"></slot>
+  </div>`;
 }
 
 registerCustomElement(SiteNavigation);