Error when manually closing a headlessui dropdown menu

[BethanyDrake]

I'm building a Next.js app using the headlessui library. I want each menu item to be a Next , and I want the menu to close when clicked. The documentation explains that "some third-party Link components use event.preventDefault() which prevents the menu from closing", and gives sample code of how to solve the issue. I copied the sample code exactly, only changing to . However, when I run the code, I get a react error: "Functions are not valid as a child of Client Components."

Code:

import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
import Link from 'next/link'

export const NavMenu = () => {
  return (
     <Menu>
      <MenuButton>Terms</MenuButton>
      <MenuItems anchor="bottom">
        <MenuItem>
          {({ close }) => (
            <Link href="/" onClick={close}>
              Read and accept
            </Link>
          )}
        </MenuItem>
      </MenuItems>
    </Menu>
  )
}

Error message:

Functions are not valid as a child of Client Components. This may happen if you return children instead of from render. Or maybe you meant to call this function rather than return it. <... children={function children}>`

package.json

"@headlessui/react": "^2.2.10",
"next": "^16.1.6",
"react": "19.2.3",

node version: v24.18.0

Am I missing something obvious?

[barry166]

In the App Router this component is a Server Component unless the file starts with 'use client'. MenuItem's child is a render-prop function, and Next cannot serialize that function across the Server -> Client Component boundary, which is what the error is complaining about.

Make the menu component a Client Component:

'use client'

import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
import Link from 'next/link'

export function NavMenu() {
  return (
    <Menu>
      <MenuButton>Terms</MenuButton>
      <MenuItems anchor="bottom">
        <MenuItem>
          {({ close }) => (
            <Link href="/" onClick={close}>
              Read and accept
            </Link>
          )}
        </MenuItem>
      </MenuItems>
    </Menu>
  )
}

Or put just this menu in a separate client file and import it from your page/layout. The Headless UI example is fine; the missing bit is that @headlessui/react + render props must run on the client in Next's App Router.

[BethanyDrake]

Thank you!