Sort Dropdown — Free HTML CSS JS Custom Sort By Menu Snippet

A native <select> is accessible and simple, but it can't be styled beyond its trigger — the dropdown list itself renders using the operating system's own styles, which breaks visual consistency on a polished product page. This snippet replaces it with a fully custom "Sort by" dropdown: a styled trigger button and an absolutely-positioned menu of radio-style options, each showing a checkmark next to the currently active choice.

How the open/close state works

The trigger button toggles an .open class on the .sort-menu and mirrors that state in aria-expanded on the button itself. The menu is always present in the DOM (not conditionally rendered) but hidden via opacity: 0, a slight translateY(-6px) offset, and pointer-events: none when closed — this lets the open/close transition animate smoothly, since a menu that's actually removed from the DOM (display: none) can't transition.

How the active option and checkmark stay in sync

Each <li> carries role="option" and aria-selected. Clicking an option calls selectSort(item), which first resets every option's aria-selected to "false" and clears its checkmark span, then sets the clicked item's aria-selected to "true" and fills in its checkmark character. The trigger's own label text is updated from item.dataset.value, so the visible button always reflects the true selected state stored on the DOM.

How click-outside and Escape-to-close work

A single click listener on document checks whether the click target is inside .sort-wrap using e.target.closest('.sort-wrap'). If not, the menu closes — this is the standard way to implement "click anywhere else closes the dropdown" without attaching a listener to every possible outside element. A parallel keydown listener closes the menu on Escape, which is expected behavior for any custom popup menu and is not something a native <select> needs since the browser already handles it.

Why not just use `<select>`

The native element remains the more accessible *default* choice for simple use cases. This custom version is for when a design system needs the dropdown menu itself — its spacing, checkmarks, hover states, and animation — to be fully brand-consistent, at the cost of reimplementing keyboard and outside-click handling yourself.