From a30587d1d1af40b678480ca2b2d218ff766cffdf Mon Sep 17 00:00:00 2001
From: jorj-pineda <jorgepineda0310@gmail.com>
Date: Tue, 11 Aug 2026 17:46:21 -0500
Subject: [PATCH 1/7] test(MegaMenu): add failing coverage for multiple
 dropdowns

Add a fixture rendering two MegaMenuDropdownToggle/MegaMenuDropdown
pairs inside a single MegaMenu, covering the scenario reported in #1610.

Both new tests fail against the current implementation:

- Every toggle resolves its dropdown via querySelector('[role=menu]')
  scoped to the whole <nav>, so all toggles target the first dropdown.
  aria-controls on the second toggle points at the first dropdown's id.
- Clicking the second toggle hides/shows the first dropdown instead of
  its own.

Refs #1610
---
 .../src/components/MegaMenu/MegaMenu.test.tsx | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/packages/ui/src/components/MegaMenu/MegaMenu.test.tsx b/packages/ui/src/components/MegaMenu/MegaMenu.test.tsx
index 72f3270e2..425cba986 100644
--- a/packages/ui/src/components/MegaMenu/MegaMenu.test.tsx
+++ b/packages/ui/src/components/MegaMenu/MegaMenu.test.tsx
@@ -29,6 +29,44 @@ describe("Components / MegaMenu", () => {
     expect(dropdown).not.toHaveClass("hidden");
   });
 
+  it("should pair each <MegaMenuDropdownToggle> with its own <MegaMenuDropdown>", async () => {
+    render(<MultipleMegaMenuTest />);
+
+    const [companyToggle, marketingToggle] = screen.getAllByRole("button");
+    const [companyDropdown, marketingDropdown] = screen.getAllByRole("menu");
+
+    expect(companyToggle.getAttribute("aria-controls")).toEqual(companyDropdown.id);
+    expect(marketingToggle.getAttribute("aria-controls")).toEqual(marketingDropdown.id);
+
+    expect(companyDropdown.getAttribute("aria-labelledby")).toEqual(companyToggle.id);
+    expect(marketingDropdown.getAttribute("aria-labelledby")).toEqual(marketingToggle.id);
+  });
+
+  it("should hide/show only its own <MegaMenuDropdown> on click <MegaMenuDropdownToggle>", async () => {
+    const user = userEvent.setup();
+    render(<MultipleMegaMenuTest />);
+
+    const [companyToggle, marketingToggle] = screen.getAllByRole("button");
+    const [companyDropdown, marketingDropdown] = screen.getAllByRole("menu");
+
+    expect(companyDropdown).not.toHaveClass("hidden");
+    expect(marketingDropdown).not.toHaveClass("hidden");
+
+    await user.click(marketingToggle);
+
+    expect(marketingDropdown).toHaveClass("hidden");
+    expect(marketingToggle).toHaveAttribute("aria-expanded", "false");
+    expect(companyDropdown).not.toHaveClass("hidden");
+    expect(companyToggle).toHaveAttribute("aria-expanded", "true");
+
+    await user.click(marketingToggle);
+
+    expect(marketingDropdown).not.toHaveClass("hidden");
+    expect(marketingToggle).toHaveAttribute("aria-expanded", "true");
+    expect(companyDropdown).not.toHaveClass("hidden");
+    expect(companyToggle).toHaveAttribute("aria-expanded", "true");
+  });
+
   it("should hide/show <MegaMenuDropdown toggle={..}> on click toggle", async () => {
     const user = userEvent.setup();
     render(<MegaMenuDropdownOnlyTest />);
@@ -63,6 +101,21 @@ function MegaMenuTest() {
   );
 }
 
+function MultipleMegaMenuTest() {
+  return (
+    <MegaMenu>
+      <MegaMenuDropdownToggle>Company</MegaMenuDropdownToggle>
+      <MegaMenuDropdown>
+        <p>Company content</p>
+      </MegaMenuDropdown>
+      <MegaMenuDropdownToggle>Marketing</MegaMenuDropdownToggle>
+      <MegaMenuDropdown>
+        <p>Marketing content</p>
+      </MegaMenuDropdown>
+    </MegaMenu>
+  );
+}
+
 function MegaMenuDropdownOnlyTest() {
   return (
     <MegaMenu>

From 94204c39ad5225e4bda963b50c3e1208e9c3d7a3 Mon Sep 17 00:00:00 2001
From: jorj-pineda <jorgepineda0310@gmail.com>
Date: Tue, 11 Aug 2026 18:19:31 -0500
Subject: [PATCH 2/7] fix(MegaMenu): pair each dropdown toggle with its own
 dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

MegaMenuDropdownToggle resolved its dropdown with querySelector('[role=menu]')
scoped to the enclosing <nav>, which always returns the first match. Every toggle
in a mega menu therefore controlled the first dropdown, and MegaMenuDropdown had
the mirror-image bug, labelling every panel with the first toggle's id.

Pair them by declaration order instead: the n-th toggle controls the n-th
dropdown. Pairing keys off dedicated data attributes rather than the ARIA roles,
because <MegaMenuDropdown toggle={..}> renders a Dropdown that also carries
aria-haspopup=menu and role=menu — and mounts its panel only while open,
which would shift the indices as sibling dropdowns opened and closed.

Also extract the panel branch of MegaMenuDropdown into its own component. Its
useId/useRef/useEffect calls sat after the early return for the  variant,
so they were called conditionally, breaking the rules of hooks.

Fixes #1610
---
 .../components/MegaMenu/MegaMenuDropdown.tsx  | 31 +++++++-----
 .../MegaMenu/MegaMenuDropdownToggle.tsx       | 18 +++----
 .../ui/src/components/MegaMenu/helpers.ts     | 47 +++++++++++++++++++
 3 files changed, 75 insertions(+), 21 deletions(-)
 create mode 100644 packages/ui/src/components/MegaMenu/helpers.ts

diff --git a/packages/ui/src/components/MegaMenu/MegaMenuDropdown.tsx b/packages/ui/src/components/MegaMenu/MegaMenuDropdown.tsx
index 8c3737825..5fa42e0a4 100644
--- a/packages/ui/src/components/MegaMenu/MegaMenuDropdown.tsx
+++ b/packages/ui/src/components/MegaMenu/MegaMenuDropdown.tsx
@@ -8,6 +8,7 @@ import { twMerge } from "../../helpers/tailwind-merge";
 import { useThemeProvider } from "../../theme/provider";
 import type { ThemingProps } from "../../types";
 import { Dropdown, type DropdownTheme } from "../Dropdown";
+import { findPairedToggle, megaMenuDropdownAttr } from "./helpers";
 import { megaMenuTheme } from "./theme";
 
 export interface MegaMenuDropdownTheme {
@@ -20,8 +21,6 @@ export interface MegaMenuDropdownProps extends ComponentProps<"div">, ThemingPro
 }
 
 export function MegaMenuDropdown(props: MegaMenuDropdownProps) {
-  const [labelledBy, setLabelledBy] = useState<string | undefined>(undefined);
-
   const provider = useThemeProvider();
   const theme = useResolveTheme(
     [megaMenuTheme.dropdown, provider.theme?.megaMenu?.dropdown, props.theme],
@@ -45,23 +44,31 @@ export function MegaMenuDropdown(props: MegaMenuDropdownProps) {
     );
   }
 
+  return (
+    <MegaMenuDropdownPanel className={twMerge(theme.base, className)} {...restProps}>
+      {children}
+    </MegaMenuDropdownPanel>
+  );
+}
+
+/**
+ * Rendered when no `toggle` is given: a panel whose visibility is driven by the
+ * `<MegaMenuDropdownToggle>` declared at the matching position.
+ *
+ * Kept as its own component so that these hooks are never called behind the `toggle`
+ * branch above, which would break the rules of hooks.
+ */
+function MegaMenuDropdownPanel({ children, ...restProps }: ComponentProps<"div">) {
   const id = useId();
   const ref = useRef<HTMLDivElement>(null);
+  const [labelledBy, setLabelledBy] = useState<string | undefined>(undefined);
 
   useEffect(() => {
-    const toggle = ref.current?.closest("nav")?.querySelector('[aria-haspopup="menu"]');
-    setLabelledBy(toggle?.id);
+    setLabelledBy(findPairedToggle(ref.current)?.id);
   }, []);
 
   return (
-    <div
-      aria-labelledby={labelledBy}
-      id={id}
-      ref={ref}
-      role="menu"
-      className={twMerge(theme.base, className)}
-      {...restProps}
-    >
+    <div aria-labelledby={labelledBy} id={id} ref={ref} role="menu" {...{ [megaMenuDropdownAttr]: "" }} {...restProps}>
       {children}
     </div>
   );
diff --git a/packages/ui/src/components/MegaMenu/MegaMenuDropdownToggle.tsx b/packages/ui/src/components/MegaMenu/MegaMenuDropdownToggle.tsx
index 62d5e2acd..c3f4f4ee4 100644
--- a/packages/ui/src/components/MegaMenu/MegaMenuDropdownToggle.tsx
+++ b/packages/ui/src/components/MegaMenu/MegaMenuDropdownToggle.tsx
@@ -8,6 +8,7 @@ import { useResolveTheme } from "../../helpers/resolve-theme";
 import { twMerge } from "../../helpers/tailwind-merge";
 import { useThemeProvider } from "../../theme/provider";
 import type { ThemingProps } from "../../types";
+import { findPairedDropdown, megaMenuDropdownToggleAttr } from "./helpers";
 import { megaMenuTheme } from "./theme";
 
 export interface MegaMenuDropdownToggleTheme {
@@ -32,20 +33,18 @@ export const MegaMenuDropdownToggle = forwardRef<HTMLButtonElement, MegaMenuDrop
 
   const { className, ...restProps } = resolveProps(props, provider.props?.megaMenuDropdownToggle);
 
-  function findDropdown() {
-    const megaMenu = innerRef.current?.closest("nav");
-
-    return megaMenu?.querySelector('[role="menu"]');
-  }
-
   function onClick() {
-    findDropdown()?.classList.toggle("hidden");
+    const dropdown = findPairedDropdown(innerRef.current);
+
+    if (!dropdown) {
+      return;
+    }
 
-    setExpanded(!isExpanded);
+    setExpanded(!dropdown.classList.toggle("hidden"));
   }
 
   useEffect(() => {
-    const dropdown = findDropdown();
+    const dropdown = findPairedDropdown(innerRef.current);
     const isDropdownHidden = dropdown?.classList.contains("hidden");
 
     setControls(dropdown?.id);
@@ -61,6 +60,7 @@ export const MegaMenuDropdownToggle = forwardRef<HTMLButtonElement, MegaMenuDrop
       id={id}
       onClick={onClick}
       className={twMerge(theme.base, className)}
+      {...{ [megaMenuDropdownToggleAttr]: "" }}
       {...restProps}
     />
   );
diff --git a/packages/ui/src/components/MegaMenu/helpers.ts b/packages/ui/src/components/MegaMenu/helpers.ts
new file mode 100644
index 000000000..f3baa8e8e
--- /dev/null
+++ b/packages/ui/src/components/MegaMenu/helpers.ts
@@ -0,0 +1,47 @@
+/**
+ * Marks a `<MegaMenuDropdownToggle>` button so it can be paired with its dropdown.
+ */
+export const megaMenuDropdownToggleAttr = "data-mega-menu-dropdown-toggle";
+
+/**
+ * Marks a `<MegaMenuDropdown>` panel so it can be paired with its toggle.
+ */
+export const megaMenuDropdownAttr = "data-mega-menu-dropdown";
+
+/**
+ * `<MegaMenuDropdownToggle>` and `<MegaMenuDropdown>` are rendered as siblings without a
+ * shared wrapper, so the only thing linking a toggle to its dropdown is the order they are
+ * declared in: the n-th toggle of a mega menu controls its n-th dropdown.
+ *
+ * Pairing is restricted to elements carrying the attributes above rather than to
+ * `[aria-haspopup="menu"]`/`[role="menu"]`, because a `<MegaMenuDropdown toggle={..}>` also
+ * renders those roles and would otherwise shift the indices as it opens and closes.
+ */
+function findPairedElement(element: HTMLElement | null, fromAttr: string, toAttr: string): HTMLElement | null {
+  const megaMenu = element?.closest("nav");
+
+  if (!element || !megaMenu) {
+    return null;
+  }
+
+  const from = Array.from(megaMenu.querySelectorAll<HTMLElement>(`[${fromAttr}]`));
+  const to = Array.from(megaMenu.querySelectorAll<HTMLElement>(`[${toAttr}]`));
+
+  return to[from.indexOf(element)] ?? null;
+}
+
+/**
+ * Returns the dropdown controlled by the given toggle, or `null` when there is no
+ * dropdown declared at the matching position.
+ */
+export function findPairedDropdown(toggle: HTMLElement | null): HTMLElement | null {
+  return findPairedElement(toggle, megaMenuDropdownToggleAttr, megaMenuDropdownAttr);
+}
+
+/**
+ * Returns the toggle controlling the given dropdown, or `null` when there is no
+ * toggle declared at the matching position.
+ */
+export function findPairedToggle(dropdown: HTMLElement | null): HTMLElement | null {
+  return findPairedElement(dropdown, megaMenuDropdownAttr, megaMenuDropdownToggleAttr);
+}

From a1a3a6feca0dd9214a362a51927835388b30ca89 Mon Sep 17 00:00:00 2001
From: jorj-pineda <jorgepineda0310@gmail.com>
Date: Tue, 11 Aug 2026 18:31:49 -0500
Subject: [PATCH 3/7] feat(MegaMenu): close other dropdowns when one is opened

Multiple mega menu dropdowns could be expanded at the same time, since each
toggle only ever touched its own dropdown.

Track the currently open toggle in a new MegaMenuContext so a toggle can
collapse itself when a sibling opens. Coordinating through context rather than
reaching into the sibling's DOM keeps each toggle's aria-expanded owned by the
component that renders it, so the attribute cannot drift from what is visible.

The context is only read on interaction, so panels declared without a
class still render open on mount as before. useMegaMenuContext intentionally
returns undefined instead of throwing, because MegaMenuDropdownToggle also
works inside a plain Navbar.

Adjusts the multiple-dropdown test that asserted the previous non-exclusive
behavior on re-open.

Refs #1610
---
 .../src/components/MegaMenu/MegaMenu.test.tsx | 27 +++++++++++++++++++
 .../ui/src/components/MegaMenu/MegaMenu.tsx   | 11 ++++++--
 .../components/MegaMenu/MegaMenuContext.tsx   | 20 ++++++++++++++
 .../MegaMenu/MegaMenuDropdownToggle.tsx       | 25 ++++++++++++++++-
 4 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 packages/ui/src/components/MegaMenu/MegaMenuContext.tsx

diff --git a/packages/ui/src/components/MegaMenu/MegaMenu.test.tsx b/packages/ui/src/components/MegaMenu/MegaMenu.test.tsx
index 425cba986..89b12279b 100644
--- a/packages/ui/src/components/MegaMenu/MegaMenu.test.tsx
+++ b/packages/ui/src/components/MegaMenu/MegaMenu.test.tsx
@@ -63,8 +63,35 @@ describe("Components / MegaMenu", () => {
 
     expect(marketingDropdown).not.toHaveClass("hidden");
     expect(marketingToggle).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("should close the other <MegaMenuDropdown> when one is opened", async () => {
+    const user = userEvent.setup();
+    render(<MultipleMegaMenuTest />);
+
+    const [companyToggle, marketingToggle] = screen.getAllByRole("button");
+    const [companyDropdown, marketingDropdown] = screen.getAllByRole("menu");
+
+    // both panels are declared without `hidden`, so they start open
+    await user.click(companyToggle);
+    await user.click(marketingToggle);
+
+    expect(companyDropdown).toHaveClass("hidden");
+    expect(marketingDropdown).toHaveClass("hidden");
+
+    await user.click(companyToggle);
+
     expect(companyDropdown).not.toHaveClass("hidden");
     expect(companyToggle).toHaveAttribute("aria-expanded", "true");
+    expect(marketingDropdown).toHaveClass("hidden");
+    expect(marketingToggle).toHaveAttribute("aria-expanded", "false");
+
+    await user.click(marketingToggle);
+
+    expect(marketingDropdown).not.toHaveClass("hidden");
+    expect(marketingToggle).toHaveAttribute("aria-expanded", "true");
+    expect(companyDropdown).toHaveClass("hidden");
+    expect(companyToggle).toHaveAttribute("aria-expanded", "false");
   });
 
   it("should hide/show <MegaMenuDropdown toggle={..}> on click toggle", async () => {
diff --git a/packages/ui/src/components/MegaMenu/MegaMenu.tsx b/packages/ui/src/components/MegaMenu/MegaMenu.tsx
index 9cab1de06..01a1e7028 100644
--- a/packages/ui/src/components/MegaMenu/MegaMenu.tsx
+++ b/packages/ui/src/components/MegaMenu/MegaMenu.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 import { get } from "../../helpers/get";
 import { resolveProps } from "../../helpers/resolve-props";
 import { useResolveTheme } from "../../helpers/resolve-theme";
 import { useThemeProvider } from "../../theme/provider";
 import type { NavbarProps, NavbarTheme } from "../Navbar";
 import { Navbar } from "../Navbar";
+import { MegaMenuContext } from "./MegaMenuContext";
 import type { MegaMenuDropdownTheme } from "./MegaMenuDropdown";
 import type { MegaMenuDropdownToggleTheme } from "./MegaMenuDropdownToggle";
 import { megaMenuTheme } from "./theme";
@@ -28,7 +29,13 @@ export const MegaMenu = forwardRef<HTMLElement, MegaMenuProps>((props, ref) => {
 
   const mergedProps = resolveProps(props, provider.props?.megaMenu);
 
-  return <Navbar ref={ref} theme={theme} fluid {...mergedProps} />;
+  const [openToggleId, setOpenToggleId] = useState<string | undefined>(undefined);
+
+  return (
+    <MegaMenuContext.Provider value={{ openToggleId, setOpenToggleId }}>
+      <Navbar ref={ref} theme={theme} fluid {...mergedProps} />
+    </MegaMenuContext.Provider>
+  );
 });
 
 MegaMenu.displayName = "MegaMenu";
diff --git a/packages/ui/src/components/MegaMenu/MegaMenuContext.tsx b/packages/ui/src/components/MegaMenu/MegaMenuContext.tsx
new file mode 100644
index 000000000..733560161
--- /dev/null
+++ b/packages/ui/src/components/MegaMenu/MegaMenuContext.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+export interface MegaMenuContextValue {
+  /** `id` of the toggle whose dropdown is currently open, if any. */
+  openToggleId: string | undefined;
+  setOpenToggleId: (id: string | undefined) => void;
+}
+
+export const MegaMenuContext = createContext<MegaMenuContextValue | undefined>(undefined);
+
+/**
+ * Unlike the other contexts in this library this one does not throw when missing:
+ * `<MegaMenuDropdownToggle>` also works inside a plain `<Navbar>`, and losing the
+ * "opening one dropdown closes the others" behavior is preferable to crashing.
+ */
+export function useMegaMenuContext(): MegaMenuContextValue | undefined {
+  return useContext(MegaMenuContext);
+}
diff --git a/packages/ui/src/components/MegaMenu/MegaMenuDropdownToggle.tsx b/packages/ui/src/components/MegaMenu/MegaMenuDropdownToggle.tsx
index c3f4f4ee4..eb22b4d78 100644
--- a/packages/ui/src/components/MegaMenu/MegaMenuDropdownToggle.tsx
+++ b/packages/ui/src/components/MegaMenu/MegaMenuDropdownToggle.tsx
@@ -9,6 +9,7 @@ import { twMerge } from "../../helpers/tailwind-merge";
 import { useThemeProvider } from "../../theme/provider";
 import type { ThemingProps } from "../../types";
 import { findPairedDropdown, megaMenuDropdownToggleAttr } from "./helpers";
+import { useMegaMenuContext } from "./MegaMenuContext";
 import { megaMenuTheme } from "./theme";
 
 export interface MegaMenuDropdownToggleTheme {
@@ -24,6 +25,9 @@ export const MegaMenuDropdownToggle = forwardRef<HTMLButtonElement, MegaMenuDrop
   const [controls, setControls] = useState<string | undefined>(undefined);
   const [isExpanded, setExpanded] = useState<boolean | undefined>(undefined);
 
+  const megaMenu = useMegaMenuContext();
+  const openToggleId = megaMenu?.openToggleId;
+
   const provider = useThemeProvider();
   const theme = useResolveTheme(
     [megaMenuTheme.dropdownToggle, provider.theme?.megaMenu?.dropdownToggle, props.theme],
@@ -40,7 +44,10 @@ export const MegaMenuDropdownToggle = forwardRef<HTMLButtonElement, MegaMenuDrop
       return;
     }
 
-    setExpanded(!dropdown.classList.toggle("hidden"));
+    const expanded = !dropdown.classList.toggle("hidden");
+
+    setExpanded(expanded);
+    megaMenu?.setOpenToggleId(expanded ? id : undefined);
   }
 
   useEffect(() => {
@@ -51,6 +58,22 @@ export const MegaMenuDropdownToggle = forwardRef<HTMLButtonElement, MegaMenuDrop
     setExpanded(!isDropdownHidden);
   }, []);
 
+  // Collapse this dropdown once another toggle of the same mega menu opens its own.
+  useEffect(() => {
+    if (openToggleId === undefined || openToggleId === id) {
+      return;
+    }
+
+    const dropdown = findPairedDropdown(innerRef.current);
+
+    if (!dropdown || dropdown.classList.contains("hidden")) {
+      return;
+    }
+
+    dropdown.classList.add("hidden");
+    setExpanded(false);
+  }, [openToggleId, id]);
+
   return (
     <button
       ref={mergeRefs([ref, innerRef])}

From 45a9d340e75627f7e0e7572142de23c3664cd150 Mon Sep 17 00:00:00 2001
From: jorj-pineda <jorgepineda0310@gmail.com>
Date: Tue, 11 Aug 2026 18:35:39 -0500
Subject: [PATCH 4/7] feat(MegaMenu): export MegaMenuContext

Every other context in the library is part of the public API
(NavbarContext, DropdownContext, SidebarContext, AccordionPanelContext),
so export MegaMenuContext, useMegaMenuContext and MegaMenuContextValue for
consistency.

The pairing helpers stay internal, matching how Clipboard and Pagination
keep their helpers.ts unexported.

Refs #1610
---
 packages/ui/src/components/MegaMenu/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/ui/src/components/MegaMenu/index.ts b/packages/ui/src/components/MegaMenu/index.ts
index 271beaf4a..58b65df32 100644
--- a/packages/ui/src/components/MegaMenu/index.ts
+++ b/packages/ui/src/components/MegaMenu/index.ts
@@ -1,5 +1,7 @@
 export { MegaMenu } from "./MegaMenu";
 export type { MegaMenuProps, MegaMenuTheme } from "./MegaMenu";
+export { MegaMenuContext, useMegaMenuContext } from "./MegaMenuContext";
+export type { MegaMenuContextValue } from "./MegaMenuContext";
 export { MegaMenuDropdown } from "./MegaMenuDropdown";
 export type { MegaMenuDropdownProps, MegaMenuDropdownTheme } from "./MegaMenuDropdown";
 export { MegaMenuDropdownToggle } from "./MegaMenuDropdownToggle";

From 5c30d9ad5362b9edeb9ee371e83be7207a29d92d Mon Sep 17 00:00:00 2001
From: jorj-pineda <jorgepineda0310@gmail.com>
Date: Tue, 11 Aug 2026 20:36:10 -0500
Subject: [PATCH 5/7] docs(MegaMenu): add multiple dropdowns example

Document declaring more than one dropdown in a single mega menu: pairing goes by declaration order, toggles and dropdowns do not have to be siblings, and a "hidden" class makes a panel start closed.

Refs #1610
---
 apps/storybook/src/MegaMenu.stories.tsx       |  62 ++++++
 .../web/content/docs/components/mega-menu.mdx |   8 +
 apps/web/examples/megaMenu/index.ts           |   1 +
 .../megaMenu/megaMenu.multipleDropdowns.tsx   | 179 ++++++++++++++++++
 4 files changed, 250 insertions(+)
 create mode 100644 apps/web/examples/megaMenu/megaMenu.multipleDropdowns.tsx

diff --git a/apps/storybook/src/MegaMenu.stories.tsx b/apps/storybook/src/MegaMenu.stories.tsx
index 9af7bddbd..efbc070d8 100644
--- a/apps/storybook/src/MegaMenu.stories.tsx
+++ b/apps/storybook/src/MegaMenu.stories.tsx
@@ -3,6 +3,7 @@ import {
   Button,
   MegaMenu,
   MegaMenuDropdown,
+  MegaMenuDropdownToggle,
   NavbarBrand,
   NavbarCollapse,
   NavbarLink,
@@ -106,3 +107,64 @@ const Template: StoryFn<MegaMenuProps> = (args) => (
 
 export const Default = Template.bind({});
 Default.args = {};
+
+const MultipleDropdownsTemplate: StoryFn<MegaMenuProps> = (args) => (
+  <MegaMenu {...args}>
+    <NavbarBrand href="/">
+      <img alt="" src="/favicon.svg" className="mr-3 h-6 sm:h-9" />
+      <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+    </NavbarBrand>
+    <NavbarToggle />
+    <NavbarCollapse>
+      <NavbarLink href="#">Home</NavbarLink>
+      <NavbarLink as="span">
+        <MegaMenuDropdownToggle>Company</MegaMenuDropdownToggle>
+      </NavbarLink>
+      <NavbarLink as="span">
+        <MegaMenuDropdownToggle>Marketing</MegaMenuDropdownToggle>
+      </NavbarLink>
+      <NavbarLink href="#">Contact</NavbarLink>
+    </NavbarCollapse>
+    <MegaMenuDropdown className="hidden">
+      <ul className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-2 py-5 shadow-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white sm:grid-cols-2 md:grid-cols-3">
+        <li>
+          <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+            <div className="font-semibold">About Us</div>
+          </a>
+        </li>
+        <li>
+          <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+            <div className="font-semibold">Careers</div>
+          </a>
+        </li>
+        <li>
+          <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+            <div className="font-semibold">Brand Center</div>
+          </a>
+        </li>
+      </ul>
+    </MegaMenuDropdown>
+    <MegaMenuDropdown className="hidden">
+      <ul className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-2 py-5 shadow-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white sm:grid-cols-2 md:grid-cols-3">
+        <li>
+          <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+            <div className="font-semibold">Blog</div>
+          </a>
+        </li>
+        <li>
+          <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+            <div className="font-semibold">Newsletter</div>
+          </a>
+        </li>
+        <li>
+          <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+            <div className="font-semibold">Events</div>
+          </a>
+        </li>
+      </ul>
+    </MegaMenuDropdown>
+  </MegaMenu>
+);
+
+export const MultipleDropdowns = MultipleDropdownsTemplate.bind({});
+MultipleDropdowns.args = {};
diff --git a/apps/web/content/docs/components/mega-menu.mdx b/apps/web/content/docs/components/mega-menu.mdx
index 69ad142fa..e842a9120 100644
--- a/apps/web/content/docs/components/mega-menu.mdx
+++ b/apps/web/content/docs/components/mega-menu.mdx
@@ -23,6 +23,14 @@ This example of a mega menu dropdown can be used to also show an icon near the t
 
 <Example name="megaMenu.icons" />
 
+## Multiple dropdowns
+
+Use this example to show more than one mega menu dropdown inside the same navbar. Pair each `<MegaMenuDropdownToggle>` with a `<MegaMenuDropdown>` by declaring them in the same order: the first toggle controls the first dropdown, the second toggle the second one, and so on. The toggles and the dropdowns do not need to be siblings, so the toggles can stay inside `<NavbarCollapse>` while the dropdowns span the full width of the navbar.
+
+Opening a dropdown closes any other dropdown of the same mega menu. Add a `hidden` class to a `<MegaMenuDropdown>` to have it start closed.
+
+<Example name="megaMenu.multipleDropdowns" />
+
 ## Full width dropdown
 
 Use this example to show a mega menu dropdown that spans the entire width of the document page.
diff --git a/apps/web/examples/megaMenu/index.ts b/apps/web/examples/megaMenu/index.ts
index 42c98f2af..c42dac975 100644
--- a/apps/web/examples/megaMenu/index.ts
+++ b/apps/web/examples/megaMenu/index.ts
@@ -2,4 +2,5 @@ export { fullWidth } from "./megaMenu.fullWidth";
 export { fullWidthCTA } from "./megaMenu.fullWidthCTA";
 export { fullWidthImage } from "./megaMenu.fullWidthImage";
 export { icons } from "./megaMenu.icons";
+export { multipleDropdowns } from "./megaMenu.multipleDropdowns";
 export { root } from "./megaMenu.root";
diff --git a/apps/web/examples/megaMenu/megaMenu.multipleDropdowns.tsx b/apps/web/examples/megaMenu/megaMenu.multipleDropdowns.tsx
new file mode 100644
index 000000000..3675e3df8
--- /dev/null
+++ b/apps/web/examples/megaMenu/megaMenu.multipleDropdowns.tsx
@@ -0,0 +1,179 @@
+import {
+  MegaMenu,
+  MegaMenuDropdown,
+  MegaMenuDropdownToggle,
+  NavbarBrand,
+  NavbarCollapse,
+  NavbarLink,
+  NavbarToggle,
+} from "flowbite-react";
+import { HiChevronDown } from "react-icons/hi";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+import {
+  MegaMenu,
+  MegaMenuDropdown,
+  MegaMenuDropdownToggle,
+  NavbarBrand,
+  NavbarCollapse,
+  NavbarLink,
+  NavbarToggle,
+} from "flowbite-react";
+import { HiChevronDown } from "react-icons/hi";
+
+function Component() {
+  return (
+    <MegaMenu>
+      <NavbarBrand href="/">
+        <img alt="" src="/favicon.svg" className="mr-3 h-6 sm:h-9" />
+        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+      </NavbarBrand>
+      <NavbarToggle />
+      <NavbarCollapse>
+        <NavbarLink href="/">Home</NavbarLink>
+        <NavbarLink as="span">
+          <MegaMenuDropdownToggle>
+            Company
+            <HiChevronDown className="ml-2" />
+          </MegaMenuDropdownToggle>
+        </NavbarLink>
+        <NavbarLink as="span">
+          <MegaMenuDropdownToggle>
+            Marketing
+            <HiChevronDown className="ml-2" />
+          </MegaMenuDropdownToggle>
+        </NavbarLink>
+        <NavbarLink href="/">Contact</NavbarLink>
+      </NavbarCollapse>
+      <MegaMenuDropdown className="hidden">
+        <ul className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-2 py-5 shadow-sm sm:grid-cols-2 md:grid-cols-3 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
+          <li>
+            <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+              <div className="font-semibold">About Us</div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">Learn more about our mission and team.</span>
+            </a>
+          </li>
+          <li>
+            <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+              <div className="font-semibold">Careers</div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">Browse the roles we are hiring for.</span>
+            </a>
+          </li>
+          <li>
+            <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+              <div className="font-semibold">Brand Center</div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">Download our logos and brand assets.</span>
+            </a>
+          </li>
+        </ul>
+      </MegaMenuDropdown>
+      <MegaMenuDropdown className="hidden">
+        <ul className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-2 py-5 shadow-sm sm:grid-cols-2 md:grid-cols-3 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
+          <li>
+            <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+              <div className="font-semibold">Blog</div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">Read the latest product announcements.</span>
+            </a>
+          </li>
+          <li>
+            <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+              <div className="font-semibold">Newsletter</div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">Get a monthly digest in your inbox.</span>
+            </a>
+          </li>
+          <li>
+            <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+              <div className="font-semibold">Events</div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">Meet the team at an upcoming meetup.</span>
+            </a>
+          </li>
+        </ul>
+      </MegaMenuDropdown>
+    </MegaMenu>
+  );
+}
+`;
+
+function Component() {
+  return (
+    <MegaMenu>
+      <NavbarBrand href="/">
+        <img alt="" src="/favicon.svg" className="mr-3 h-6 sm:h-9" />
+        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+      </NavbarBrand>
+      <NavbarToggle />
+      <NavbarCollapse>
+        <NavbarLink href="/">Home</NavbarLink>
+        <NavbarLink as="span">
+          <MegaMenuDropdownToggle>
+            Company
+            <HiChevronDown className="ml-2" />
+          </MegaMenuDropdownToggle>
+        </NavbarLink>
+        <NavbarLink as="span">
+          <MegaMenuDropdownToggle>
+            Marketing
+            <HiChevronDown className="ml-2" />
+          </MegaMenuDropdownToggle>
+        </NavbarLink>
+        <NavbarLink href="/">Contact</NavbarLink>
+      </NavbarCollapse>
+      <MegaMenuDropdown className="hidden">
+        <ul className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-2 py-5 shadow-sm sm:grid-cols-2 md:grid-cols-3 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
+          <li>
+            <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+              <div className="font-semibold">About Us</div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">Learn more about our mission and team.</span>
+            </a>
+          </li>
+          <li>
+            <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+              <div className="font-semibold">Careers</div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">Browse the roles we are hiring for.</span>
+            </a>
+          </li>
+          <li>
+            <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+              <div className="font-semibold">Brand Center</div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">Download our logos and brand assets.</span>
+            </a>
+          </li>
+        </ul>
+      </MegaMenuDropdown>
+      <MegaMenuDropdown className="hidden">
+        <ul className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-2 py-5 shadow-sm sm:grid-cols-2 md:grid-cols-3 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
+          <li>
+            <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+              <div className="font-semibold">Blog</div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">Read the latest product announcements.</span>
+            </a>
+          </li>
+          <li>
+            <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+              <div className="font-semibold">Newsletter</div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">Get a monthly digest in your inbox.</span>
+            </a>
+          </li>
+          <li>
+            <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
+              <div className="font-semibold">Events</div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">Meet the team at an upcoming meetup.</span>
+            </a>
+          </li>
+        </ul>
+      </MegaMenuDropdown>
+    </MegaMenu>
+  );
+}
+
+export const multipleDropdowns: CodeData = {
+  type: "single",
+  code: {
+    fileName: "index",
+    language: "tsx",
+    code,
+  },
+  githubSlug: "megaMenu/megaMenu.multipleDropdowns.tsx",
+  component: <Component />,
+};

From 8b31da1d848a35271e14080179bdd30f6d79968d Mon Sep 17 00:00:00 2001
From: jorj-pineda <jorgepineda0310@gmail.com>
Date: Tue, 11 Aug 2026 20:43:21 -0500
Subject: [PATCH 6/7] chore: add changeset for mega menu multiple dropdowns

Patch bump, matching how this project versions additive changes: minor is
reserved for breaking changes in the changelog history.

Refs #1610
---
 .changeset/olive-donkeys-shave.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 .changeset/olive-donkeys-shave.md

diff --git a/.changeset/olive-donkeys-shave.md b/.changeset/olive-donkeys-shave.md
new file mode 100644
index 000000000..92b570688
--- /dev/null
+++ b/.changeset/olive-donkeys-shave.md
@@ -0,0 +1,12 @@
+---
+"flowbite-react": patch
+---
+
+Support multiple dropdowns inside a single `<MegaMenu>`
+
+### Changes
+
+- [x] pair each `<MegaMenuDropdownToggle>` with its own `<MegaMenuDropdown>` by declaration order, instead of always resolving the first dropdown of the navbar
+- [x] close the other dropdowns of a mega menu when one is opened
+- [x] export `MegaMenuContext`, `useMegaMenuContext` and `MegaMenuContextValue`
+- [x] stop calling hooks conditionally in `<MegaMenuDropdown>`

From 6e5366b8d1e360c66c975677e55f09a66e848aed Mon Sep 17 00:00:00 2001
From: jorj-pineda <jorgepineda0310@gmail.com>
Date: Tue, 11 Aug 2026 20:58:29 -0500
Subject: [PATCH 7/7] docs(MegaMenu): give multiple dropdowns example a full
 width row

Children of MegaMenu are flex items of a "flex flex-wrap justify-between"
row, so a dropdown without a width class renders beside the navbar links
instead of below them, and the links shift whenever it is hidden.

Add w-full so each dropdown wraps onto its own row, and document it.

Refs #1610
---
 apps/storybook/src/MegaMenu.stories.tsx                   | 4 ++--
 apps/web/content/docs/components/mega-menu.mdx            | 2 +-
 apps/web/examples/megaMenu/megaMenu.multipleDropdowns.tsx | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/storybook/src/MegaMenu.stories.tsx b/apps/storybook/src/MegaMenu.stories.tsx
index efbc070d8..1cdfe89aa 100644
--- a/apps/storybook/src/MegaMenu.stories.tsx
+++ b/apps/storybook/src/MegaMenu.stories.tsx
@@ -125,7 +125,7 @@ const MultipleDropdownsTemplate: StoryFn<MegaMenuProps> = (args) => (
       </NavbarLink>
       <NavbarLink href="#">Contact</NavbarLink>
     </NavbarCollapse>
-    <MegaMenuDropdown className="hidden">
+    <MegaMenuDropdown className="hidden w-full">
       <ul className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-2 py-5 shadow-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white sm:grid-cols-2 md:grid-cols-3">
         <li>
           <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
@@ -144,7 +144,7 @@ const MultipleDropdownsTemplate: StoryFn<MegaMenuProps> = (args) => (
         </li>
       </ul>
     </MegaMenuDropdown>
-    <MegaMenuDropdown className="hidden">
+    <MegaMenuDropdown className="hidden w-full">
       <ul className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-2 py-5 shadow-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white sm:grid-cols-2 md:grid-cols-3">
         <li>
           <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
diff --git a/apps/web/content/docs/components/mega-menu.mdx b/apps/web/content/docs/components/mega-menu.mdx
index e842a9120..72d4ab404 100644
--- a/apps/web/content/docs/components/mega-menu.mdx
+++ b/apps/web/content/docs/components/mega-menu.mdx
@@ -27,7 +27,7 @@ This example of a mega menu dropdown can be used to also show an icon near the t
 
 Use this example to show more than one mega menu dropdown inside the same navbar. Pair each `<MegaMenuDropdownToggle>` with a `<MegaMenuDropdown>` by declaring them in the same order: the first toggle controls the first dropdown, the second toggle the second one, and so on. The toggles and the dropdowns do not need to be siblings, so the toggles can stay inside `<NavbarCollapse>` while the dropdowns span the full width of the navbar.
 
-Opening a dropdown closes any other dropdown of the same mega menu. Add a `hidden` class to a `<MegaMenuDropdown>` to have it start closed.
+Opening a dropdown closes any other dropdown of the same mega menu. Add a `hidden` class to a `<MegaMenuDropdown>` to have it start closed, and a `w-full` class to have it span its own row instead of sitting next to the navbar links.
 
 <Example name="megaMenu.multipleDropdowns" />
 
diff --git a/apps/web/examples/megaMenu/megaMenu.multipleDropdowns.tsx b/apps/web/examples/megaMenu/megaMenu.multipleDropdowns.tsx
index 3675e3df8..1cc76ca40 100644
--- a/apps/web/examples/megaMenu/megaMenu.multipleDropdowns.tsx
+++ b/apps/web/examples/megaMenu/megaMenu.multipleDropdowns.tsx
@@ -46,7 +46,7 @@ function Component() {
         </NavbarLink>
         <NavbarLink href="/">Contact</NavbarLink>
       </NavbarCollapse>
-      <MegaMenuDropdown className="hidden">
+      <MegaMenuDropdown className="hidden w-full">
         <ul className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-2 py-5 shadow-sm sm:grid-cols-2 md:grid-cols-3 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
           <li>
             <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
@@ -68,7 +68,7 @@ function Component() {
           </li>
         </ul>
       </MegaMenuDropdown>
-      <MegaMenuDropdown className="hidden">
+      <MegaMenuDropdown className="hidden w-full">
         <ul className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-2 py-5 shadow-sm sm:grid-cols-2 md:grid-cols-3 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
           <li>
             <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
@@ -119,7 +119,7 @@ function Component() {
         </NavbarLink>
         <NavbarLink href="/">Contact</NavbarLink>
       </NavbarCollapse>
-      <MegaMenuDropdown className="hidden">
+      <MegaMenuDropdown className="hidden w-full">
         <ul className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-2 py-5 shadow-sm sm:grid-cols-2 md:grid-cols-3 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
           <li>
             <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">
@@ -141,7 +141,7 @@ function Component() {
           </li>
         </ul>
       </MegaMenuDropdown>
-      <MegaMenuDropdown className="hidden">
+      <MegaMenuDropdown className="hidden w-full">
         <ul className="mx-auto mt-6 grid max-w-screen-xl border-y border-gray-200 px-2 py-5 shadow-sm sm:grid-cols-2 md:grid-cols-3 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
           <li>
             <a href="#" className="block rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-700">