Reading time: 1 min

This recipe shows how to add disclosure indicator to your SwiftUI List rows.

The end result looks like this:


The disclosure indicator is added automatically whenever your list row contains a NavigationLink, but sometimes you wish render the indicator and have a custom action when the row is tapped.

First, add an "empty" NavigationLink - one without a label or a destination:

extension NavigationLink where Label == EmptyView, Destination == EmptyView {
  static var empty: NavigationLink {
    self.init(destination: EmptyView(), label: { EmptyView() })

Then, use a Button that wraps the empty NavigationLink to render your row with a disclosure indicator:

struct DisclosureIndicatorRow<Label: View>: View {
  let action: () -> Void
  @ViewBuilder let label: () -> Label

  var body: some View {
    Button(action: action, label: {
      HStack {

Finally, here's some code that showcases the DisclosureIndicatorRow in action:

List {
  Text("Normal row")
  DisclosureIndicatorRow {
  } label: {
    Text("Disclosure row 1")
  DisclosureIndicatorRow {
    print("Tapped 2")
  } label: {
    Label("Disclosure row 2", systemImage: "envelope")

Next Post Previous Post