facebook/docusaurus · error · Error

No NavbarItem component found for type "${type}".

Error message

No NavbarItem component found for type "${type}".

What it means

Thrown by the `NavbarItem` dispatcher when no component is registered in `ComponentTypes` for the resolved navbar item `type`. The dispatcher maps a string `type` (e.g. `'doc'`, `'docsVersionDropdown'`, `'localeDropdown'`, `'html'`, `'custom'`) to a swizzlable theme component; an unmapped type cannot be rendered.

Source

Thrown at packages/docusaurus-theme-classic/src/theme/NavbarItem/index.tsx:25

import React, {type ReactNode} from 'react';
import ComponentTypes from '@theme/NavbarItem/ComponentTypes';
import type {NavbarItemType, Props} from '@theme/NavbarItem';

function normalizeComponentType(type: NavbarItemType, props: object) {
  // Backward compatibility: navbar item with no type set
  // but containing dropdown items should use the type "dropdown"
  if (!type || type === 'default') {
    return 'items' in props ? 'dropdown' : 'default';
  }
  return type;
}

export default function NavbarItem({type, ...props}: Props): ReactNode {
  const componentType = normalizeComponentType(type, props);
  const NavbarItemComponent = ComponentTypes[componentType];
  if (!NavbarItemComponent) {
    throw new Error(`No NavbarItem component found for type "${type}".`);
  }
  return <NavbarItemComponent {...(props as any)} />;
}

View on GitHub (pinned to 3f483e80e3)

Solutions

  1. Check the navbar item's `type` against the documented built-ins: `default`, `dropdown`, `doc`, `docSidebar`, `docsVersionDropdown`, `localeDropdown`, `html`, `search`, `custom-*`.
  2. For a custom type, create `src/theme/NavbarItem/MyType/index.tsx` and ensure your theme aliasing registers it under `ComponentTypes`.
  3. Fix typos (`'docs'` → `'doc'`).
  4. If a third-party plugin provides the type, confirm the plugin is installed and its theme is loaded.

Example fix

// before
navbar: [{to: '/docs/intro', label: 'Docs', type: 'docs'}] // typo
// after
navbar: [{to: '/docs/intro', label: 'Docs', type: 'doc'}]
Defensive patterns

Strategy: validation

Validate before calling

const BUILTIN = new Set(['default','dropdown','doc','docSidebar','docsVersionDropdown','localeDropdown','html','search','custom']);
function isValidNavbarItemType(t: string): boolean {
  return BUILTIN.has(t) || t.startsWith('custom-');
}

Type guard

type BuiltinNavbarItemType = 'default'|'dropdown'|'doc'|'docSidebar'|'docsVersionDropdown'|'localeDropdown'|'html'|'search'|'custom';
function isBuiltinNavbarItemType(t: string): t is BuiltinNavbarItemType {
  return ['default','dropdown','doc','docSidebar','docsVersionDropdown','localeDropdown','html','search','custom'].includes(t);
}

Prevention

When it happens

Trigger: A navbar entry uses `type: 'something'` that is not a built-in navbar item type and for which no `@theme/NavbarItem/Something` component has been registered (via the `getSwizzableComponentTypes` / theme-alias mechanism).

Common situations: Typo in `type` (e.g. `'docs'` instead of `'doc'`); referencing a custom navbar item type without creating the corresponding component and alias; disabling a navbar item component via a custom theme shim; version mismatch where a newer config uses a type an older theme does not provide.

Related errors


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