Changing Default Dropdown Text in Webflow

Hey everyone,

I have a little concern. If I have dropdowns and each dropdown is a link to a page, and I have the same dropdown on each page these links redirect to, is it possible to change the default dropdown text to the current selection when I click on a link in the dropdown and it redirects to the page? I’m not sure if this is natively doable on Webflow without any custom code and I’ve been looking for a way to implement this. Check out the dropdown elements inside the filters-wrapper class to understand better.

Hosted Link


Hey guys,

I’d still love to know if this is natively doable on Webflow.

Thank you!

That’s an unusual way to navigate, it looks like a filter setup.

No, you’d need custom code to change the displayed text, but the way you’ve set it up only one of the for selectors can have a selection at any given time.

JS setup would be;

  • Scan all 4 collection lists to find any which have the w--current class applied by Webflow.
  • If there are, then you’re on that page. Take that text, set the displayed text for the dropdown’s title, and maybe restyle it so it’s noticeable.
1 Like

Hey @memetican,

Thanks a lot! Thats what I thought too. Custom code would certainly be needed to change the displayed text. I only needed to make sure I’m not missing anything.

Thanks again!

hi @SiteGrow I agree with @memetican that it is unusual approach and it will be for clients confusing navigation. IMO “dropdown” element is not right choice, what you are asking (display current selected choice ) is build-in in “Select” element.

Anyway WF pre-build “select” element is missing core functionality like set option as disabled. Look on code below what I mean.

You will be better to use custom code because as was mentioned this is a “filter” sending requests to update content dynamically on change or have button that will update data on submit etc. etc.

Principle example:

    <select id="cars">
      <option selected disabled>Choose one</option>
      <option value="saab">Saab</option>
      <option value="vw">VW</option>
      <option value="audi">Audi</option>

Redirect on change:


  <h1>Pure CSS Dropdown select</h1>

  <select id="mySelect" onchange="getOption(value)">
    <option value="">WFF 1</option>
    <option  value="">WFF 2</option>



let newHref = ""

// set first link to `newHref` on page load 
window.onload = function() {
    const select = document.getElementById("mySelect");
    newHref = select.value;

// than any new `newHref` is set on select change
function getOption(v){
  newHref = v 

you can also use radio buttons like this:

Your choice :man_shrugging:

1 Like

Hey @Stan,

I understand your point, thanks for the advise!

1 Like