A way to create dropdowns for navigation / anchor tags similar to <select>

[KonnorRogers]

A common pattern I see for documentation sites that support multiple languages or version is using a <select> and storing the href for a new page in the <option> value.

Here are some examples:

From the Astro docs:

https://docs.astro.build/en/getting-started/

<select value="/en/getting-started/">
  <option value="/de/getting-started/">Deutsch</option>
</select>

And then they listen for the change event and redirect the user that way.

Other examples:

https://gorails.com/episodes/responsive-navigation-with-turbo

https://github.com/gorails-screencasts/responsive-navigation-with-turbo/blob/91c6aeba5d771b07984931d7be7b4b4583736821/app/views/shared/_navigation.html.erb#L9

(Yes, its a rails form helper, but it translates to this:)

<select>
  <option value="/calendar">Calendar</option>
</select>

<script>
  select.addEventListener("change", () => {
    Turbo.visit(select.selectedOptions[0].value)
  })  
</script>

It's a pattern users clearly want. It's also used in things like Version Switchers for documentation sites.

I don't have any proposals to make here, but it is a pattern I see popping up, and it's not great for screenreaders or for non-screenreader users because it can be unexpected to be navigated to a new page if you're not clicking an actual <a> tag.

Example of a "proper" way to handle this pattern:

https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/

[keithamus]

It sounds like probably what web authors want is something that looks like a menu but is really a list of links. I think this is a good fit for a <div popover>. Do you think that would suffice?

[KonnorRogers]

@keithamus I think they also want keyboard navigation. @WickyNilliams made a good point this could easily be made with focusgroup + popover

You will lose out on the search buffer built into <select>, but I don't know how necessary that is.