Navigation Menu - SEO doubts - dynamically creates submenu items on mouseover

[Maofree]

Hi
I'm building my first website with nextjs and shadcn, and I've just noticed something I don't think is SEO-friendly. Child entries of the main entries are dynamically created when the mouse hovers over them and removed when the mouse is no longer over them.
When search engine bots hover over them, I don't think they'll see the site's page structure, only the main ones. I don't think this is good for SEO and site indexing.

https://ui.shadcn.com/docs/components/navigation-menu
In the examples on this page, you can see this behavior from Chrome webtools and similar tools.

Is there an option to avoid this behavior?

I think the current behavior is wrong for SEO, good for other things but not for SEO

[zumpalov]

I have noticed the same. I don't think search engine bots hover at all. I have the same fear. Alternatives?

[Maofree]

Hi @zumpalov

for the moment I've added a hidden menu for the search engine bots

function renderSeoMenu(navigation: NavItem[]) {
  const renderMenuLevel = (items: NavItem[]): React.ReactNode => {
    return (
      <ul>
        {items.map(item => (
          <li key={`seo-${item.name}`}>
            <Link href={item.href}>{item.name}</Link>
            {item.children && item.children.length > 0 && (
              renderMenuLevel(item.children)
            )}
          </li>
        ))}
      </ul>
    )
  }

  return (
    <nav className="sr-only" aria-label="Menu di navigazione completo per SEO">
      {renderMenuLevel(navigation)}
    </nav>
  )
}

I've seen that this menu behavior in react is quite common, same thing with headlessui. This seems a bit strange to me, having to neglect SEO aspects. Even the mobile menu creates and destroys children elements.