# How to create a dynamic menu

**URL:** <https://community.thunkable.com/t/how-to-create-a-dynamic-menu/2889029>\
**Category:** Questions about Thunkable X\
**Created:** [March 12, 2024, 2:42pm UTC](https://community.thunkable.com/t/how-to-create-a-dynamic-menu/2889029 "2024-03-12T14:42:59Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![biagio.prisco](https://avatars.discourse-cdn.com/v4/letter/b/73ab20/32.png) [@biagio.prisco](https://community.thunkable.com/u/biagio.prisco)\
**Post date:** [March 12, 2024, 2:42pm UTC](https://community.thunkable.com/t/how-to-create-a-dynamic-menu/2889029/1 "2024-03-12T14:42:59Z")

</div>

Hi, I’m creating a dynamic menu that the user can customize. From a MySql database I download all the possible menu items (45) which I show on 15 lines of three items each as you can see in the attached image.

 ![Menu](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/1/9108926ba99c22ef63ae583e958da94470b2ad0f.jpeg)  
To do this, however, I created 15 rows with three buttons on each row. However, the user can choose both which icon to show and the order in which to show them. Then I download the icons and related parameters into list-type variables and with these I compose (manually) the menu. But, in practice, this is a Data Viewer Grid. Can you give me some advice on how to handle it instead of doing it line by line? Thank you

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 12, 2024, 4:53pm UTC](https://community.thunkable.com/t/how-to-create-a-dynamic-menu/2889029/2 "2024-03-12T16:53:27Z")

</div>

If you want to use a Data Viewer Grid (DVG), you’re limited to two buttons across. It does make things easier in the sense that you just store the icon and title text in a data source and the DVG syncs everything. If you change the content of the data source – for example, switching to rows’ data – then the DVG will show the updated changes.

---

<div class="post-metadata">

**Author:** ![biagio.prisco](https://avatars.discourse-cdn.com/v4/letter/b/73ab20/32.png) [@biagio.prisco](https://community.thunkable.com/u/biagio.prisco)\
**Post date:** [March 12, 2024, 5:04pm UTC](https://community.thunkable.com/t/how-to-create-a-dynamic-menu/2889029/3 "2024-03-12T17:04:27Z")

</div>

Thanks tatiang, but reducing to two buttons per row becomes too long to scroll through. That’s why I’m trying to make it 3 or 4 buttons.  
I was thinking of some variant of Listview…

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 12, 2024, 5:15pm UTC](https://community.thunkable.com/t/how-to-create-a-dynamic-menu/2889029/4 "2024-03-12T17:15:15Z")

</div>

I think you’ll either need to set this up manually or use Any Component blocks to create/clone the buttons you need.

---

<div class="post-metadata">

**Author:** ![biagio.prisco](https://avatars.discourse-cdn.com/v4/letter/b/73ab20/32.png) [@biagio.prisco](https://community.thunkable.com/u/biagio.prisco)\
**Post date:** [March 12, 2024, 5:20pm UTC](https://community.thunkable.com/t/how-to-create-a-dynamic-menu/2889029/5 "2024-03-12T17:20:27Z")

</div>

This is what I’m doing to assign icons to blocks and intercept the button. I hope there is some better way to manage a menu…  
Thanks for your help

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 12, 2024, 7:07pm UTC](https://community.thunkable.com/t/how-to-create-a-dynamic-menu/2889029/6 "2024-03-12T19:07:11Z")

</div>

> [@biagio.prisco](#):
>
> This is what I’m doing to assign icons to blocks and intercept the button.

Did you mean to include a screenshot?

---

<div class="post-metadata">

**Author:** ![biagio.prisco](https://avatars.discourse-cdn.com/v4/letter/b/73ab20/32.png) [@biagio.prisco](https://community.thunkable.com/u/biagio.prisco)\
**Post date:** [March 12, 2024, 10:50pm UTC](https://community.thunkable.com/t/how-to-create-a-dynamic-menu/2889029/7 "2024-03-12T22:50:07Z")

</div>

![Appunti01](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/d/9da257a9c53af15cb190196489e06f870e3467a1.jpeg)

All MenuXXXXX variables are lists and contain the icons, the page titles, the name of the screens, the name of the table to which they are linked, and the key for the link. These variables are set with values ​​from a MySql query in the previous Screen.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 13, 2024, 2:08am UTC](https://community.thunkable.com/t/how-to-create-a-dynamic-menu/2889029/8 "2024-03-13T02:08:11Z")

</div>

Yep, that’s pretty much how I would do it.

---

<div class="post-metadata">

**Author:** ![biagio.prisco](https://avatars.discourse-cdn.com/v4/letter/b/73ab20/32.png) [@biagio.prisco](https://community.thunkable.com/u/biagio.prisco)\
**Post date:** [March 13, 2024, 12:04pm UTC](https://community.thunkable.com/t/how-to-create-a-dynamic-menu/2889029/9 "2024-03-13T12:04:55Z")

</div>

Actually what I would need is a custom listview.  
I should define the line and then repeat it.  
With other tools like AppGyver there is this possibility…

---

<div class="post-metadata">

**Author:** ![biagio.prisco](https://avatars.discourse-cdn.com/v4/letter/b/73ab20/32.png) [@biagio.prisco](https://community.thunkable.com/u/biagio.prisco)\
**Post date:** [March 13, 2024, 3:59pm UTC](https://community.thunkable.com/t/how-to-create-a-dynamic-menu/2889029/10 "2024-03-13T15:59:53Z")

</div>

@tatiang  
I saw this post:

> [@Demo: Checkbox effect for cloned "DVL" components](https://community.thunkable.com/t/demo-checkbox-effect-for-cloned-dvl-components/2127918):
>
> This is a work in progress. I’m building a food journal app that allows people to keep track of what they eat each day. The data is all stored in Firebase. One of the features I wanted is a way for the user to click on an item to select it and then delete it. With a Data Viewer List (DVL), it’s easy to do this with [swipe detection](https://docs.thunkable.com/data-viewer-list#swipe-click). But since I cloned the components in this “DVL”, it doesn’t have that built-in event block. So I had to figure out a way to determine which – in this case, …

Couldn’t it be changed by inserting three buttons in the rows?

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 13, 2024, 10:21pm UTC](https://community.thunkable.com/t/how-to-create-a-dynamic-menu/2889029/11 "2024-03-13T22:21:55Z")

</div>

I suppose so. The math can get a little confusing when trying to identify which button was pressed but I think I may have done something like that before with a DVL. I tend to favor cloned components in groups for something like that but you could always experiment with that.

I think the limitation of a DVL is that it syncs data from one for of a data source for each row of the DVL. So if you’re wanting three different data sets in a **single row** of a DVL, I’m not sure how you pull that off.

---

<div class="post-metadata">

**Author:** ![biagio.prisco](https://avatars.discourse-cdn.com/v4/letter/b/73ab20/32.png) [@biagio.prisco](https://community.thunkable.com/u/biagio.prisco)\
**Post date:** [March 15, 2024, 3:02pm UTC](https://community.thunkable.com/t/how-to-create-a-dynamic-menu/2889029/12 "2024-03-15T15:02:09Z")

</div>

If the limitation of a DVL is that it synchronizes data from a data source for each row of the DVL I don’t think it’s easy to intervene.  
I think it’s easier to create a ListView-like component by placing the data in a two-dimensional array.  
The biggest problem is that I should know how a ListView works inside and how it was written. I don’t think so with Thunkable… 😀

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [June 13, 2024, 3:02pm UTC](https://community.thunkable.com/t/how-to-create-a-dynamic-menu/2889029/13 "2024-06-13T15:02:11Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
