mantinedev/mantine · error · Error

Menu.Sub.Target component children should be an element or a

Error message

Menu.Sub.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported

What it means

Menu.Sub.Target clones its child to attach submenu open handlers and a ref (validated with isElement). Fragments, strings, numbers and ref-less components are not valid because the submenu anchor needs a real DOM node.

Source

Thrown at packages/@mantine/core/src/components/Menu/MenuSubTarget/MenuSubTarget.tsx:15

import { isElement } from '../../../core';
import { Popover } from '../../Popover';
import { useMenuContext } from '../Menu.context';

export interface MenuSubTargetProps {
  /** Target element */
  children: React.ReactNode;

  /** Key of the prop used to get element ref @default 'ref' */
  refProp?: string;
}

export function MenuSubTarget({ children, refProp }: MenuSubTargetProps) {
  if (!isElement(children)) {
    throw new Error(
      'Menu.Sub.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'
    );
  }

  useMenuContext();

  return (
    <Popover.Target refProp={refProp} popupType="menu">
      {children}
    </Popover.Target>
  );
}

MenuSubTarget.displayName = '@mantine/core/MenuSubTarget';

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Use a proper element such as Menu.Item as the submenu target
2. Forward refs in custom trigger components
3. Remove fragments/text so one element child remains

Example fix

// before
<Menu.Sub.Target>More…</Menu.Sub.Target>

// after
<Menu.Sub.Target><Menu.Sub.Item>More…</Menu.Sub.Item></Menu.Sub.Target>

// Use a Menu.Sub.Item element as the sole child of Menu.Sub.Target

const isValidTargetChild = (c: React.ReactNode): boolean => isElement(c);

When it happens

Trigger: Child of Menu.Sub.Target is a primitive, fragment, multiple children, or a component that doesn't accept/forward a ref.

Common situations: Building nested menus and using a plain label or an icon component as the submenu trigger instead of a Menu item element.

Related errors

• Menu.Target component children should be an element or a com
• Combobox.DropdownTarget component children should be an elem
• Combobox.EventsTarget component children should be an elemen
• Combobox.Target component children should be an element or a
• ComboboxPopover.Target component children should be an eleme

AI-assisted analysis of mantinedev/mantine@8a284e2c2c (2026-08-28). Data as JSON: /api/errors/6b86ad2e6b6eb37f. Report an issue: GitHub.