|
How come there is no proper HTML dropdown component that displays a system menu when clicked? By system menu, I mean how it looks when you right-click, but I'm specifically looking for left-click menu. We have `<select>` for selections, but nothing to pop up a dropdown with actions. I'm aware I can hack `<select>` to do that. That's exactly what I did. But it's ain't easy or pretty. And no, not `<dialog>`. 12 comments
@pixelscience Yes, I would be fine with it being links. That's the main use-case anyway. @sindresorhus In the past I’ve used css :hover or :focus effects to accomplish a menu-like effect. @sindresorhus What exactly do you mean by a system menu? Something that looks like a right-click context menu? @sindresorhus Related issue: https://github.com/w3c/manifest/issues/1025 Here's what I ended up with (click the (...) button): https://sindresorhus.com/icon-preview @sindresorhus It looks pretty but lacks accessibility: missing focus state, missing label, plus `...` will probably be awkward and confusing in a screen reader. I do agree that HTML should provide such components that works the right way by default. @sindresorhus <menu contextmenu> used to work in Firefox, but no other browser implemented it. @sindresorhus Like somebody already said, there was an implementation of something like this in Firefox where you could add your own options to the native menu. All the other options suppress the native context menu which I think is not optimal, but it works in some app like contexts, like Nextcloud or VSCode @sindresorhus or a typeahead multi select... so much design system effort goes towards implementing that one component |
Gregory's Server
@sindresorhus I suppose the w3c thought that “actions” in HTML are semantically links. I’m not sure.
When you add JavaScript to the mix then, yeah, event listeners on select is probably the closest appropriate.