facebook/docusaurus · error · ReactContextError

Hook is called outside the <NavbarSecondaryMenuContentProvid

Error message

Hook is called outside the <NavbarSecondaryMenuContentProvider>. 

What it means

Thrown by `useNavbarSecondaryMenuContent()` when its context value is falsy, meaning the hook was called outside `<NavbarSecondaryMenuContentProvider>`. The provider holds the teleport/portal state that lets page components fill the mobile secondary menu.

Source

Thrown at packages/docusaurus-theme-common/src/contexts/navbarSecondaryMenu/content.tsx:58

/** @internal */
export function NavbarSecondaryMenuContentProvider({
  children,
}: {
  children: ReactNode;
}): ReactNode {
  const value = useState({component: null, props: null});
  return (
    // @ts-expect-error: this context is hard to type
    <Context.Provider value={value}>{children}</Context.Provider>
  );
}

/** @internal */
export function useNavbarSecondaryMenuContent(): Content {
  const value = useContext(Context);
  if (!value) {
    throw new ReactContextError('NavbarSecondaryMenuContentProvider');
  }
  return value[0];
}

/**
 * This component renders nothing by itself, but it fills the placeholder in the
 * generic secondary menu layout. This reduces coupling between the main layout
 * and the specific page.
 *
 * This kind of feature is often called portal/teleport/gateway/outlet...
 * Various unmaintained React libs exist. Most up-to-date one:
 * https://github.com/gregberge/react-teleporter
 * Not sure any of those is safe regarding concurrent mode.
 */
export function NavbarSecondaryMenuFiller<P extends object>({
  component,
  props,
}: {

View on GitHub (pinned to 3f483e80e3)

Solutions

1. Ensure `<NavbarSecondaryMenuContentProvider>` wraps the subtree that uses `NavbarSecondaryMenuFiller` / `useNavbarSecondaryMenuContent`.
2. Wrap test renders of those components with the provider.
3. Restore the provider in any swizzled layout.

Example fix

// before
<NavbarSecondaryMenuFiller component={MyComp} props={{}} />
// after
<NavbarSecondaryMenuContentProvider>
  <NavbarSecondaryMenuFiller component={MyComp} props={{}} />
</NavbarSecondaryMenuContentProvider>

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

try {
  const content = useNavbarSecondaryMenuContent();
} catch (e) {
  if (e instanceof Error && e.message.includes('NavbarSecondaryMenuContentProvider')) return null;
  throw e;
}

When it happens

Trigger: A component (typically a `NavbarSecondaryMenuFiller`) reads the secondary-menu content context from outside the provider. The provider normally sits in the navbar/layout; consumers must be descendants.

Common situations: Swizzling the layout and dropping the provider; rendering a secondary-menu filler component in isolation/tests without the provider; moving the secondary menu into a portal that escapes the provider subtree.

Related errors

• Hook is called outside the <NavbarSecondaryMenuDisplayProvid
• 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/88f596105218f09b. Report an issue: GitHub.