NavigationMenu mismatched ref types

[insano70]

Bug report

Current behavior

NavigationMenu.List, NavigationMenu.Item, and NavigationMenu.Icon have mismatched ref types between their Props interface and ForwardRefExoticComponent declaration. The Props extend the correct semantic element types ('ul', 'li', 'span'), but the ForwardRefExoticComponent declares RefAttributes<HTMLDivElement> for all three.

This causes TypeScript error TS2322 when spreading props:

error TS2322: Type '{ ... ref?: Ref<HTMLUListElement> | undefined; ... }' is not assignable to type 'RefAttributes<HTMLDivElement>'.
  Types of property 'ref' are incompatible.

Expected behavior

The ForwardRefExoticComponent ref type should match the semantic element type defined in the Props interface:

• NavigationMenuList → RefAttributes<HTMLUListElement>
• NavigationMenuItem → RefAttributes<HTMLLIElement>
• NavigationMenuIcon → RefAttributes<HTMLSpanElement>

Reproducible example

The bug is in the type definition files themselves. See NavigationMenuList.d.ts line 10, NavigationMenuItem.d.ts line 10, and NavigationMenuIcon.d.ts line 9.

Base UI version

v1.1.0

Which browser are you using?

N/A - TypeScript compilation error

Which OS are you using?

macOS

Which assistive tech are you using (if applicable)?

N/A

Additional context

The type definitions in NavigationMenuList.d.ts, NavigationMenuItem.d.ts, and NavigationMenuIcon.d.ts each show the same pattern where the component documentation correctly states the rendered element (e.g., "Renders a <ul> element"), but the ForwardRefExoticComponent declares RefAttributes<HTMLDivElement>.

[github-actions]

This fix will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui/react@3775