iosswiftswiftuimenu

Sublabel inside SwiftUI Menu Button


I try to create a menu with buttons containing primary and secondary labels like the photo bellow using SwiftUI, so I embed the button and the text (as secondary label) in the VStack, but it's doesn't work. How I can create this view in swiftUI?

enter image description here

The Code

 Menu {
        Section {
            search
        }
        Section {
// The sort button
        Menu  {
            Picker("Sorting options", selection: $sort) {
                ForEach(SortType.allCases, id: \.self) { type in
                    Label("title", systemImage: "chevron.up")
                        .tag(type)
                }
            }
        } label: {
// Here I should embed title and subtitle like the photo but I don't know how.
            Label("Sort By", systemImage: "arrow.up.arrow.down")
        }
        }
    } label: {
        menuLabel
    }

Solution

  • You can achieve this in SwiftUI by adding and extra Text component next to your menu label. For example:

    Menu("Sort") {
      Menu {
        Picker("Sort By", selection: $sortBy) {
          ForEach(SortBy.allCases) { sortOption in
            Text(sortOption.rawValue)
              .tag(sortOption)
          }
        }
      } label: {
         Label("Sort By", systemImage: "arrow.up.arrow.down")
         Text(sortBy.rawValue)
      }
    }