Flyout Menus are not SEO friendly

[mkrkelj1]

What component (if applicable) Flyout Menus

Expected behavior Menu items should be rendered to the DOM, even if closed. These are essential for crawlers, backlinks, etc.

[reinink]

Hey, thanks for sharing this feedback! You're right, if the flyout menu is the only place on your website that includes links to those pages, then it's probably a good idea to always render these to make it easier for crawlers to find them. Of course this is really project dependent — it's also very common to include site links in the footer of a website, or even in a sitemap.xml file, in which case this isn't needed.

Here's how you can update our flyout menu components in your own projects to always render to the DOM:

  export default function Example() {
    return (
      <Popover className="relative">
        <Popover.Button className="inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
          <span>Solutions</span>
          <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
        </Popover.Button>

        <Transition
          as={Fragment}
+         unmount={false}
          enter="transition ease-out duration-200"
          enterFrom="opacity-0 translate-y-1"
          enterTo="opacity-100 translate-y-0"
          leave="transition ease-in duration-150"
          leaveFrom="opacity-100 translate-y-0"
          leaveTo="opacity-0 translate-y-1"
        >
-         <Popover.Panel className="absolute left-1/2 z-10 mt-5 flex w-screen max-w-max -translate-x-1/2 px-4">
+         <Popover.Panel unmount={false} className="absolute left-1/2 z-10 mt-5 flex w-screen max-w-max -translate-x-1/2 px-4">
            <div className="w-screen max-w-md flex-auto overflow-hidden rounded-3xl bg-white text-sm leading-6 shadow-lg ring-1 ring-gray-900/5">
              <div className="p-4">
                {solutions.map((item) => (

Just be sure to include unmount={false} on both the Transition and Popover.Panel, otherwise it won't work.

Hope that helps! 🤙