Turn a knack menu view buttons into a drop down menu

This one is a simple one if you want to have a different arrangement for you menu view. This takes your existing menu and turns it into a drop down.

from this…

to this…

One thing you will need to do is you will need to have your custom settings turned on. You could use this in a way to choose if you want the menu to have a drop down

Finally you can set the event view to any and just use the option custom settings to enable or disable.


$(document).on('knack-view-render.any, function() {
  var $select = $("<select/>").appendTo(".menu-links");
  $(".menu-links__list-item a").each(function() {
    var $option = $("<option/>");
  $select.change(function() {
    window.location = $(this).val();


.menu-links select {

Another great solution :+1:


That’s brilliant thanks will be great for using on mobile and some of our desktop scenes.


1 Like

Johnny, this is so great but I can’t get it to work in my app! The JS keeps breaking the script overall and never changes the buttons. Any ideas?

1 Like

Hey @Michael23

Great to hear from you. We will be looking into this for you and get back to you as soon as possible for a solution. I see you have left a comment on the post in hand so will reach out to you personally.