Proposal: Classless Dropdown component leveraging Popover API

[dday9]

Proposal: Classless dropdown component leveraging the Popover API

I would like to propose a classless Dropdown component built with the native Popover API.

Pico currently provides a Dropdown component through its class-based stylesheet, but the component is not available when using the Classless version. A native popover-based implementation could provide equivalent dropdown behavior without requiring a component class or JavaScript.

The proposed structure uses a button as the trigger and a nested unordered list as the dropdown content:

<button type="button" popovertarget="dropdown-demo" aria-haspopup="true">
  Dropdown
</button>
<ul id="dropdown-demo" popover aria-label="Dropdown items">
  <li><a href="#">Solid</a></li>
  <li><a href="#">Liquid</a></li>
  <li><a href="#">Gas</a></li>
  <li><a href="#">Plasma</a></li>
</ul>

This structure preserves the semantic markup used within Pico class-based Dropdown component while relying on native browser behavior for opening and closing the dropdown.

• The <button> remains responsible for toggling the dropdown through popovertarget.
• The popover attribute provides native light-dismiss behavior.
• The <ul> identifies the dropdown contents as a list of related navigation items.
• CSS Anchor Positioning places the dropdown relative to its trigger.

The trigger can be established as an anchor:

button[popovertarget] {
  anchor-name: --dropdown-anchor;
}

The popover can then be positioned and styled using selectors based entirely on native HTML attributes:

ul[popover] {
  position-anchor: --dropdown-anchor;
  position-area: bottom span-all;
  position-try-fallbacks: flip-block, flip-inline;
}

The result would be a dropdown component that fits naturally within Pico Classless.

Fiddle: https://jsfiddle.net/vreabyhk/