Order Mapped Menu Items Inconsistent

💬 App Building
1

  • Goal: I am trying to use a variable to fill the menu items in the navigation bar, some of them have a mutual parent. I want the order of the items according to how I've listed the items programmatically.

  • Steps: I have tried the following structure:

{{
  [
    { value: 'dashboard', label: 'Dashboard', icon: '/icon:bold/interface-setting-gauge-dashboard-2' },
    { value: 'people', label: 'People', parent: 'General' },
    { value: 'projects', label: 'Projects', parent: 'General' },
    { value: 'contracts', label: 'Contracts', parent: 'General' },
    { value: 'machines', label: 'Machines', parent: 'General' },
    { value: 'uploads', label: 'Uploads' }
  ]
}}

However, in the end result you can see that Uploads preceeds the others that have a parent in their position. I was expecting the "Uploads" to appear after the parent item "General", but this is not the case.

You can pretty much reproduce the result using mapped menu items and looking at the order in which the items occur.

Hope you can help me by fixing this or hinting at some way I can make it work with the current setup.

Thanks! :wave:

3

I also provided another feature request that is related to this: Order Mapped Menu Items in case anyone's interested in what I consider to be a good solution :wink:

1 Like
4

Currently, it appears the order is set to random which can be fun at times, but usually we just want the order in which the object is defined :stuck_out_tongue: Sorry for the #sarcasm

1 Like
5

Hi @emozio!

Apologies for the confusion for the ordering :sweat:

I put the code snippet for the array of objects into a JS variable and then passed this as the source for a nav bar to map over and it seems to display them in chronological order (Dashboard->Uploads).

But I do not have any parent categories so that might be what I am missing to reproduce this.

CleanShot 2025-02-19 at 16.47.23@2x
CleanShot 2025-02-19 at 16.47.23@2x3098×890 245 KB

If you could share a screenshot of your nav bar and how you have the parents set up that would be helpful!

6

Quick update: I experimented with using a separate script to reorder the menu items, but this didn't work. I did discover that once I fill in the parent, the order turns out alright.

1 Like
7

Ahhh ok very interesting, glad you were able to get it working fine now!