Email or username:

Password:

Forgot your password?
Sindre Sorhus

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
Michael Critz

@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.

Sindre Sorhus

@pixelscience Yes, I would be fine with it being links. That's the main use-case anyway.

Michael Critz

@sindresorhus In the past I’ve used css :hover or :focus effects to accomplish a menu-like effect.

Marius Gundersen

@sindresorhus What exactly do you mean by a system menu? Something that looks like a right-click context menu?

Axel Rauschmayer

@sindresorhus
For web apps in general (and especially PWAs), it’d be great to have a cross-platform way of setting up menus, possibly mixed with icons.

Related issue: github.com/w3c/manifest/issues

Artem Sapegin

@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.

Brad Dougherty

@sindresorhus <menu contextmenu> used to work in Firefox, but no other browser implemented it.

Moritz G.

@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

Sindre Sorhus

Reason #4221 why I prefer native development 🤷‍♂️

AK

@sindresorhus or a typeahead multi select... so much design system effort goes towards implementing that one component

Go Up