<selectmenu> demosThe purpose of the Open UI group is to provide the web platform with UI controls that can be styled and extended by web developers. The <selectmenu> element is one of the early browser implementations of the Open UI select specification.
<selectmenu> is available in Chromium-based browsers and requires a Canary version as well as the Experimental Web Platform features flag to be enabled in about:flags.
The demos below show how the <selectmenu> UI control can be used to achieve what was once only possible with custom selects.
The control is still in its early days and these demos have been made to find bugs with the implementation and limitations in the architecture. They are not complete and have bugs.
Also note that some of the demos are not fully accessible. The experimental <selectmenu> control allows to go very far in extending its default behavior. Some of the demos extend and even replace the entire shadow DOM of the control in order to push the prototype to its limits. As a result some demos are inaccessible. These are currently serving as a way to provoke discussions aimed at evolving the specification and implementation.
Allow selecting multiple options from the list, displaying them in the button.
Custom toggle button with animation, icons for options.
Mix a grid of colors and a list of action items. Display a split button (click the A to set the color, click the arrow to open the drop-down).