mantinedev/mantine · error · Error

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

Error message

Menu.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.Target clones its single child to attach the toggle click handler and positioning ref. getSingleElementChild returns null for fragments, primitives, or empty children, so the menu would have no anchor; the component throws immediately.

Source

Thrown at packages/@mantine/core/src/components/Menu/MenuTarget/MenuTarget.tsx:23

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

  /** Key of the prop used to get element ref, useful for forwarding refs to custom components @default 'ref' */
  refProp?: string;
}

const defaultProps = {
  refProp: 'ref',
} satisfies Partial<MenuTargetProps>;

export function MenuTarget(props: MenuTargetProps) {
  const { children, refProp, ...others } = useProps('MenuTarget', defaultProps, props);

  const child = getSingleElementChild(children);
  if (!child) {
    throw new Error(
      'Menu.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'
    );
  }

  const ctx = useMenuContext();
  const _childProps = child.props as any;

  const onClick = createEventHandler(_childProps.onClick, () => {
    if (ctx.trigger === 'click') {
      ctx.toggleDropdown();
    } else if (ctx.trigger === 'click-hover') {
      ctx.setOpenedViaClick(true);
      if (!ctx.opened) {
        ctx.openDropdown();
      }
    }
  });

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Give Menu.Target one element child (Button, ActionIcon, etc.)
2. Add ref forwarding to custom controls
3. When combining Tooltip and Menu on the same trigger, nest targets around a single shared element instead of fragments

Example fix

// before
<Menu.Target>Options</Menu.Target>

// after
<Menu.Target><Button>Options</Button></Menu.Target>

// Pass exactly one element (Button/ActionIcon) as Menu.Target child

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

When it happens

Trigger: Child of Menu.Target is a string/number, a fragment, multiple elements, or a custom component that does not forward refs.

Common situations: Replacing the default button with a custom control lacking ref forwarding, or wrapping the trigger in a fragment for tooltip+menu composition (a classic conflict scenario).

Related errors

• Menu.Sub.Target component children should be an element or a
• 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/4a678f7dbc519d2f. Report an issue: GitHub.