[BUG] Broken burger navbar with dropdown subnav

[anthony-robin]

Please search for duplicate or closed issues first. ✔️

Describe the issue

When using the burger nav with a subnav, dropdown items are hidden either in desktop and mobile views. It seems that role="navigation" applied to the nav is responsible of the bug. Without it dropdown is visible but the burger input form appears as well and in an incorrect position (see expected behavior section screenshot).

Current Behavior

Dropdown items are not visible on click (Account item)

Expected Behavior

Dropdown items should be visible on click.

Note that here, role="navigation" have been removed to the nav tag which breaks the burger form input.

Reproduction URL

Try this snippet:

<nav role="navigation" data-position="start">
  <ul role="list">
    <li> <strong> MyApp </strong> </li>
  </ul>

  <input type="checkbox" id="menu-btn2">
  <label for="menu-btn2" style="font-size: calc(var(--pico-font-size) * 1.3);" aria-label="Menu" aria-controls="nav-example2">
    &equiv;
  </label>

  <ul id="nav-example2" role="list">
    <li role="listitem"> <a href="#"> Accueil </a> </li>

    <li role="listitem">
      <details class="dropdown">
        <summary> Account </summary>

        <ul>
          <li> <a href="#"> Profile </a> </li>
          <li> <a href="#"> Settings </a> </li>
          <li> <a href="#"> Security </a> </li>
          <li> <a href="#"> Logout </a> </li>
        </ul>
      </details>
    </li>
  </ul>
</nav>

Environment

• pico.min.css 2.2.3

[Yohn]

Nice find, I was actually going to put the hamburger nav on a site I'm working on and that has the dropdown in it too, so this will need to be updated ASAP.

Codepen

I'll probably be investigating this some more later today or tomorrow.

[anthony-robin]

Thank you very much for working on this so quickly 🙏

[anthony-robin]

Also note that dropdown items are overflowing the page width and creates an horizontal scrollbar when text is too long (when removing the role="navigation" from nav for now).

[Yohn]

Updated Codepen

It has to do with the overflow on the nav, which I put in the CSS section of the codepen.

And for the menu going off the screen there use the dir="rtl" attribute on <ul dir="rtl"> within the details element:

    <details class="dropdown">
        <summary>
          Account
        </summary>
        <ul dir="rtl">
          <li><a href="#">Profile</a></li>
          <li><a href="#">Settings</a></li>
          <li><a href="#">Security</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
     </details>

[Yohn]

nav[role="navigation"] {
	overflow: visible;
}
@media (max-width: 510px) {
	// will need to do a selector on if the checkbox is checked
	//    to show / hide the overflow when in hamburger
	nav[role="navigation"] {
		overflow: hidden;
	}
	nav[role="navigation"]:has(input[type="checkbox"]:checked) {
		overflow: visible;
	}
}

I'll have to play around with the other breakpoints, but that should get ya going again.