title: Headless UI - Popover - Menu item state
body: <p>I'm trying to implement Popover from <a href="https://headlessui.dev/react/popover" rel="nofollow noreferrer">https://headlessui.dev/react/popover</a>, but I cannot quite figure out how I can get the menu to close when clicking the menu items.</p>
  <p>I'm using NextJS and Link, and that is where I see the behavior. When I am only using &lt; a &gt; tags, then it reloads the page and the menu is closed on reload, but I would like to leverage Link from NextJS.</p>
  <p>This is my header file simplified without class names:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Fragment, useState } from &quot;react&quot;;
  import { Popover, Transition } from &quot;@headlessui/react&quot;;
  import Link from &quot;next/link&quot;;
  
  export default function Header() {
    const [navbar, setNavbar] = useState(false);
  
    const changeNavbar = () =&gt; {
      if (window.scrollY &gt;= 80) {
        setNavbar(true);
      } else {
        setNavbar(false);
      }
    };
  
    React.useEffect(() =&gt; {
      window.addEventListener(&quot;scroll&quot;, changeNavbar);
    }, []);
  
    return (
      &lt;Wrapper&gt;
        &lt;div&gt;
          &lt;Popover&gt;
            {({ open }) =&gt; (
              &lt;&gt;
                &lt;div&gt;
                  &lt;div&gt;
                    &lt;div&gt;
                      &lt;span&gt;Name&lt;/span&gt;
                      &lt;Link href=&quot;/&quot;&gt;
                        &lt;img
                          src=&quot;/images/logos/logo_blue.png&quot;
                          alt=&quot;&quot;
                        /&gt;
                      &lt;/Link&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                      &lt;Popover.Button&gt;
                        &lt;span&gt;Open menu&lt;/span&gt;
                        &lt;MenuIcon aria-hidden=&quot;true&quot; /&gt;
                      &lt;/Popover.Button&gt;
                    &lt;/div&gt;
                    &lt;Popover.Group as=&quot;nav&quot;&gt;
                      {main.map((item) =&gt; (
                        &lt;Link href={item.href} key={item.name}&gt;
                          &lt;a key={item.name}&gt;
                            {item.name}
                          &lt;/a&gt;
                        &lt;/Link&gt;
                      ))}
  
                      &lt;Popover&gt;
                        {({ open }) =&gt; (
                          &lt;&gt;
                            &lt;Popover.Button&gt;
                              &lt;span&gt;More&lt;/span&gt;
                              &lt;ChevronDownIcon
                                aria-hidden=&quot;true&quot;
                              /&gt;
                            &lt;/Popover.Button&gt;
  
                            &lt;Transition
                              show={open}
                              as={Fragment}
                              enter=&quot;transition ease-out duration-200&quot;
                              enterFrom=&quot;opacity-0 translate-y-1&quot;
                              enterTo=&quot;opacity-100 translate-y-0&quot;
                              leave=&quot;transition ease-in duration-150&quot;
                              leaveFrom=&quot;opacity-100 translate-y-0&quot;
                              leaveTo=&quot;opacity-0 translate-y-1&quot;
                            &gt;
                              &lt;Popover.Panel
                                static&gt;
                                &lt;div&gt;
                                  &lt;div&gt;
                                    {resources.map((item) =&gt; (
                                      &lt;a
                                        key={item.name}
                                        href={item.href}
                                        &gt;
                                        &lt;item.icon
                                          aria-hidden=&quot;true&quot;
                                        /&gt;
                                        &lt;div&gt;
                                          &lt;p&gt;
                                            {item.name}
                                          &lt;/p&gt;
                                          &lt;p&gt;
                                            {item.description}
                                          &lt;/p&gt;
                                        &lt;/div&gt;
                                      &lt;/a&gt;
                                    ))}
                                  &lt;/div&gt;
                                 &lt;/div&gt;
                              &lt;/Popover.Panel&gt;
                            &lt;/Transition&gt;
                          &lt;/&gt;
                        )}
                      &lt;/Popover&gt;
                    &lt;/Popover.Group&gt;
                    &lt;div&gt;
                      &lt;a
                        href=&quot;/login&quot;&gt;
                        Sign in
                      &lt;/a&gt;
                      &lt;a
                        href=&quot;/login&quot;
                      &gt;
                        Sign up
                      &lt;/a&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;Transition
                  show={open}
                  as={Fragment}
                  enter=&quot;duration-200 ease-out&quot;
                  enterFrom=&quot;opacity-0 scale-95&quot;
                  enterTo=&quot;opacity-100 scale-100&quot;
                  leave=&quot;duration-100 ease-in&quot;
                  leaveFrom=&quot;opacity-100 scale-100&quot;
                  leaveTo=&quot;opacity-0 scale-95&quot;
                &gt;
                  &lt;Popover.Panel
                    focus
                    static
                   &gt;
                    &lt;div&gt;
                      &lt;div&gt;
                        &lt;div&gt;
                          &lt;Link href=&quot;/&quot;&gt;
                            &lt;img
                              src=&quot;/images/logos/logo_blue.png&quot;
                              alt=&quot;Workflow&quot;
                            /&gt;
                          &lt;/Link&gt;
                          &lt;div className=&quot;-mr-2&quot;&gt;
                            &lt;Popover.Button&gt;
                              &lt;span &gt;Close menu&lt;/span&gt;
                              &lt;XIcon aria-hidden=&quot;true&quot; /&gt;
                            &lt;/Popover.Button&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div&gt;
                          &lt;nav&gt;
                            {main.map((item) =&gt; (
                              &lt;a
                                key={item.name}
                                href={item.href}
                              &gt;
                                &lt;item.icon
                                  aria-hidden=&quot;true&quot;
                                /&gt;
                                &lt;span&gt;
                                  {item.name}
                                &lt;/span&gt;
                              &lt;/a&gt;
                            ))}
                          &lt;/nav&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;div&gt;
                          {resources.map((item) =&gt; (
                            &lt;a
                              key={item.name}
                              href={item.href}
                            &gt;
                              {item.name}
                            &lt;/a&gt;
                          ))}
                        &lt;/div&gt;
                        &lt;div&gt;
                          &lt;a
                            href=&quot;/login&quot;
                          &gt;
                            Sign up
                          &lt;/a&gt;
  
                          &lt;p&gt;
                            Existing customer?{&quot; &quot;}
                            &lt;a href=&quot;/login&quot;&gt;
                              Sign in
                            &lt;/a&gt;
                          &lt;/p&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/Popover.Panel&gt;
                &lt;/Transition&gt;
              &lt;/&gt;
            )}
          &lt;/Popover&gt;
        &lt;/div&gt;
      &lt;/Wrapper&gt;
    );
  }
  
  </code></pre>