# Turn a knack menu view buttons into a drop down menu

**URL:** <https://forums.knack.com/t/turn-a-knack-menu-view-buttons-into-a-drop-down-menu/14153>\
**Category:** Show & Tell\
**Created:** [April 25, 2023, 5:27pm UTC](https://forums.knack.com/t/turn-a-knack-menu-view-buttons-into-a-drop-down-menu/14153 "2023-04-25T17:27:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Johnny\_Appknowledged\_UK](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/johnny_appknowledged_uk/32/2898_2.png) [@Johnny\_Appknowledged\_UK](https://forums.knack.com/u/Johnny_Appknowledged_UK)\
**Post date:** [April 25, 2023, 5:27pm UTC](https://forums.knack.com/t/turn-a-knack-menu-view-buttons-into-a-drop-down-menu/14153/1 "2023-04-25T17:27:36Z")

</div>

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…

 ![Screenshot 2023-04-25 at 18.14.42](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/c/c0335a601803a9a42e46b8ce5a3369ad2c89f45e.png)  
to this…

 ![Screenshot 2023-04-25 at 18.19.15](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/c/c43ff32f0e938726a01c34e1f82a5bc50214c6ce.png)

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

 ![Screenshot 2023-04-25 at 18.20.33](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/7/7ef78b0ece043d0677fa94d531cc76d038fb7f46.png)

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

**Javascript**

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

```

**CSS**

```auto
.menu-links select {
  padding:10px;
  cursor:pointer;
}

```

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [April 25, 2023, 6:46pm UTC](https://forums.knack.com/t/turn-a-knack-menu-view-buttons-into-a-drop-down-menu/14153/2 "2023-04-25T18:46:19Z")

</div>

Another great solution 👍

---

<div class="post-metadata">

**Author:** ![CSWinnall](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/cswinnall/32/3631_2.png) [@CSWinnall](https://forums.knack.com/u/CSWinnall)\
**Post date:** [May 4, 2023, 6:34pm UTC](https://forums.knack.com/t/turn-a-knack-menu-view-buttons-into-a-drop-down-menu/14153/3 "2023-05-04T18:34:43Z")

</div>

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

Craig

---

<div class="post-metadata">

**Author:** ![Michael23](https://avatars.discourse-cdn.com/v4/letter/m/74df32/32.png) [@Michael23](https://forums.knack.com/u/Michael23)\
**Post date:** [October 22, 2023, 1:25pm UTC](https://forums.knack.com/t/turn-a-knack-menu-view-buttons-into-a-drop-down-menu/14153/4 "2023-10-22T13:25:49Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Johnny\_Appknowledged\_UK](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/johnny_appknowledged_uk/32/2898_2.png) [@Johnny\_Appknowledged\_UK](https://forums.knack.com/u/Johnny_Appknowledged_UK)\
**Post date:** [October 22, 2023, 1:43pm UTC](https://forums.knack.com/t/turn-a-knack-menu-view-buttons-into-a-drop-down-menu/14153/5 "2023-10-22T13:43:05Z")

</div>

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.

Thanks