SwiftUI Menu top-to-bottom order varies depending on context?

Question

I think I know the answer to this, but I'll pose it as a question and give my answer, since it was a bit puzzling to me and it took me a little while to figure out.

I'm just starting to use Menu's in SwiftUI. In my first application of them I used them in the nav bar of my app.

            Menu {
                ForEach(pickers, id: \.mediaPickerUIDisplayName) { picker in
                    Button(action: {
                        viewModel.sheetToShow = .picker(picker)
                    }) {
                        Text(picker.mediaPickerUIDisplayName)
                    }.enabled(picker.mediaPickerEnabled)
                }
            } label: {
                SFSymbolIcon(symbol: .plusCircle)
            }

And it looked good.

Then, I changed the context in which this same code was used. Instead of being used from the nav bar, I used it in the center of a screen. And instead I saw:

I was disconcerted in that the top-to-bottom ordering of items in the list had changed.

Answer 1

[UPDATE] In iOS16 (beta) at the time of writing you can now use the new modifier .menuOrder(.fixed). That will keep the order of your items, well, fixed and the name implies…

Yup. This is the ‘native’ behavior which I personally find extremely bad. Imagine you have the delete button on the bottom and suddenly without any warning the order changes only because the element has moved above /bellow the midline. Muscle memory will kick in and the users will get extremely confused. This is an omission with catastrophic consequences.