facebook/docusaurus · error · ReactContextError

Hook is called outside the <NavbarSecondaryMenuDisplayProvid

Error message

Hook is called outside the <NavbarSecondaryMenuDisplayProvider>. 

What it means

Thrown by `useNavbarSecondaryMenuDisplay()` when its context value is missing, i.e. the hook was called outside `<NavbarSecondaryMenuDisplayProvider>`. This provider controls whether the secondary menu is shown and supplies the content; the consumer reads both.

Source

Thrown at packages/docusaurus-theme-common/src/contexts/navbarSecondaryMenu/display.tsx:92

  }
  return undefined;
}

/** Wires the logic for rendering the mobile navbar secondary menu. */
export function useNavbarSecondaryMenu(): {
  /** Whether secondary menu is displayed. */
  shown: boolean;
  /**
   * Hide the secondary menu; fired either when hiding the entire sidebar, or
   * when going back to the primary menu.
   */
  hide: () => void;
  /** The content returned from the current secondary menu filler. */
  content: ReactNode;
} {
  const value = useContext(Context);
  if (!value) {
    throw new ReactContextError('NavbarSecondaryMenuDisplayProvider');
  }
  const [shown, setShown] = value;
  const hide = useCallback(() => setShown(false), [setShown]);
  const content = useNavbarSecondaryMenuContent();

  return useMemo(
    () => ({shown, hide, content: renderElement(content)}),
    [hide, content, shown],
  );
}

View on GitHub (pinned to 3f483e80e3)

Solutions

1. Keep `<NavbarSecondaryMenuDisplayProvider>` as an ancestor of the secondary menu display component.
2. Wrap test renders with the provider.
3. Diff swizzled layout against upstream after upgrades.

Example fix

// before
<SecondaryMenuDisplay />
// after
<NavbarSecondaryMenuDisplayProvider>
  <SecondaryMenuDisplay />
</NavbarSecondaryMenuDisplayProvider>

import {useContext} from 'react';
import {Context} from '@docusaurus/theme-common/internal/navbarSecondaryMenu/display';
function useSecondaryMenuDisplaySafe() {
  const v = useContext(Context);
  return v ?? null;
}

try {
  const {shown, hide, content} = useNavbarSecondaryMenuDisplay();
} catch (e) {
  if (e instanceof Error && e.message.includes('NavbarSecondaryMenuDisplayProvider')) return null;
  throw e;
}

When it happens

Trigger: A component calling `useNavbarSecondaryMenuDisplay()` is rendered outside the provider subtree, or the provider was removed from the navbar layout during swizzling.

Common situations: Swizzled navbar missing the provider; rendering the secondary menu display component in isolation/tests; portal escaping the provider.

Related errors

• Hook is called outside the <NavbarSecondaryMenuContentProvid
• Hook is called outside the <NavbarMobileSidebarProvider>.
• Hook is called outside the <ScrollControllerProvider>.
• Hook is called outside the <AnnouncementBarProvider>.
• Hook is called outside the <ColorModeProvider>. Please see h

AI-assisted analysis of facebook/docusaurus@3f483e80e3 (2026-08-12). Data as JSON: /api/errors/34e01933ecb1e78d. Report an issue: GitHub.