popover.txt

<div>
        <button class="menu-btn" popovertarget="menu">
          <img
            src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Hamburger_icon.svg"
            alt=""
          />
          <span class="sr-only">Open menu</span>
        </button>
      
        <nav popover id="menu">
          <button class="close-btn" popovertarget="menu" popovertargetaction="hide">
            <span aria-hidden="true">❌</span>
            <span class="sr-only">Close menu</span>
          </button>
          <ul>
            <li><a href="#">Typography</a></li>
            <li><a href="#">Foundations</a></li>
            <li><a href="#">Color</a></li>
            <li><a href="#">Interactions</a></li>
            <li><a href="#">Components</a></li>
            <li><a href="#">Responsive</a></li>
          </ul>
        </nav>
      
        <h1>JS-Free hamburger menu demo</h1>
        <h2>With the Popover API</h2>
        <p>
          Click open the hamburger menu to see a demo of JavaScript-free interaction
          handling! By using the <code>popover</code> attribute, you can allow the
          browser to handle the keyboard management (including navigation via
          <code>esc</code>, <code>spacebar</code>, and <code>enter</code>), optional
          light-dismiss (clicking outside the boundaries of the popover), and click
          handlers such as on the open and close buttons.
        </p>
      </div>