Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide chevron/arrow on NavigationLink when displaying a view, SwiftUI [duplicate]

Tags:

swiftui

I am trying to remove the chevron that appears on the right of the screen with a navigationLink that contains a view. This is my code below:

        NavigationView {
        List {
             NavigationLink(destination: DynamicList()) {
                  ResultCard()
             }
      ...
      }

Other answers on Stack Overflow have recommended using something like the below:

NavigationLink(...)
   .opacity(0)

However, this doesn't work in my case since bringing the opacity down to 0 also removes the view that I am trying to display. This is also the case with '.hidden'. I've searched everywhere and the only somewhat working solution I could find was to alter the padding in order to 'push' the chevron off of the side, but this is a poor solution since the 'ResultCard' view will appear wonky/off-centre on different display sizes.

Perhaps it isn't possible to remove the chevron - and if this is the case, is there any other way I can allow the user to tap the 'ResultCard' view and be taken to a new page, that isn't through a navigation link?

I'm banging my head on the wall so any ideas are very much appreciated.

like image 276
HarryW Avatar asked Dec 29 '25 07:12

HarryW


2 Answers

You can use an .overlay on your label view with a NavigationLink with an EmptyView() set as its label:


struct ContentView : View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink("Link 1", destination: Text("Hi"))
                Text("Test")
                    .overlay(NavigationLink(destination: Text("Test"), label: {
                        EmptyView()
                    }))
            }
        }
    }
}

Example of overlay navigation

Update: Another solution, which seems to work with other types of Views besides Text:

struct ContentView : View {
    @State private var linkActive = false
    
    var body: some View {
        NavigationView {
            List {
                NavigationLink("Link 1", destination: Text("Hi"))
                Button(action: { linkActive = true }) {
                    Image(systemName: "pencil")
                }.overlay(VStack {
                    if linkActive {
                        NavigationLink(destination: Text("Test"), isActive: $linkActive) {
                            EmptyView()
                        }.opacity(0)
                    }
                })
            }
        }
    }
}

like image 156
jnpdx Avatar answered Jan 01 '26 16:01

jnpdx


This worked for me, building on @wristbands's solution and targeting iOS 16 using Xcode 14.1:

struct ContentView : View {
    var body: some View {
        NavigationStack {
            List {
                Text("View")    // your view here
                .overlay {
                    NavigationLink(destination: { Text("Test") }, 
                                   label: { EmptyView() })
                        .opacity(0)
                }
            }
        }
    }
}
like image 25
Mostafa Al Belliehy Avatar answered Jan 01 '26 17:01

Mostafa Al Belliehy