SwiftUI NavigationLink Hide Arrow

Question

Is there a way to hide the arrow to the right of the navigation link view that is automatically added?

I want to show an image grid using NavigationView -> List -> HStack -> NavigationLink_1 - NavigationLink_2

The NavigationLinks have arrows and it looks weird

@crazyhor77 nah, I went back to storyboard, UICollectionView, and segues on cell clicks after this. — blackops, Oct 15 '19 at 07:28
See: https://stackoverflow.com/questions/56516333/swiftui-navigationbutton-without-the-disclosure-indicator — Pascal Guizard, Oct 25 '19 at 08:31

score 41 · Accepted Answer · answered Jan 20 '20 at 23:49

41

The way it worked for me:

List { 
    ForEach(elements) { element in
        ZStack {
            CustomView(element: element)
            NavigationLink(destination: DestinationView()) {
                EmptyView()
            }.buttonStyle(PlainButtonStyle())
        }
    }
}

answered Jan 20 '20 at 23:49

Vladimirs Matusevics

1,092
12
21

1

I used `Rectangle().opacity(0.0)` instead of `EmptyView()` for List, it worked. – iSpain17 Aug 06 '20 at 17:40
I'm using the same solution but the problem is that even though the arrow is not visible, you can still tap it. In my application I have to disable this otherwise it will crash. Any ideas? – Alexandr Čížek Oct 13 '20 at 09:52
.buttonStyle(PlainButtonStyle()) is working for me. – Parth Patel Dec 30 '20 at 16:35
2

Doesn't work on iOS14.2+ – Brogrammer Jan 26 '23 at 18:56

turingtested · Answer 2 · 2023-07-19T11:11:21.453

41

The easiest way I've found is to place the navigation in the .background modifier with the opacity of zero:

List {
    Text("The cell")
        .background(
            NavigationLink("", destination: Text("The detail view"))
                .opacity(0)
        )
}

And with this solution you don't loose the dynamic height functionality of the cells.

Bonus: Using .overlay modifier works too!

edited Jul 19 '23 at 11:11

answered Feb 18 '21 at 14:37

turingtested

6,356
7
32
47

2

The only working answer I've found. Thanks ! – Petar Apr 15 '22 at 15:34
Still works with iOS 15 – snoop168 Aug 02 '22 at 20:25
4

Still works with iOS 16 – Alessandro Pace Nov 07 '22 at 23:54
This should be the accepted answer. (no offense) – iOS Blacksmith May 05 '23 at 15:26

score 21 · Answer 3 · answered May 11 '20 at 07:38

21

I got it done with this

NavigationLink(destination: DestinationView()) {
      EmptyView()
}
.frame(width: 0, height: 0)
.hidden()

answered May 11 '20 at 07:38

Jagoan Neon

1,072
11
13

7

.hidden() should be enough – Peter Kreinz Sep 15 '20 at 11:00
I had to include the frame along with hidden because it caused a Text to truncate its contents when the NavigationLink was to the right of the Text in a List row if I just wrote hidden without the zero-size frame, so at least in my case I needed to write it as the answer above says. – James Toomey Feb 15 '22 at 04:23
Doesn't work anymore – Brogrammer Jan 26 '23 at 13:49

score 6 · Answer 4 · answered Sep 27 '20 at 18:28

The only thing that helped me is to add .opacity(0) to NavigationLink like so:

List { 
    ForEach(elements) { element in
        ZStack {
            CustomView(element: element)
            NavigationLink(destination: DestinationView()), 
            label: {}).opacity(0)
        }
    }
}

score 5 · Answer 5 · answered Aug 13 '21 at 23:59

5

List { 
    ForEach(elements) { element in
        ZStack {
            CustomView(element: element)
            NavigationLink(destination: DestinationView()) {
                EmptyView()
            }.opacity(0.0)
        }
    }
}

answered Aug 13 '21 at 23:59

Z3r0CooL

131
1
7

score 3 · Answer 6 · edited Nov 06 '19 at 19:08

3

@State var selection: Int? = nil

var body: some View {
    let navigation = NavigationLink(destination: Text("View"), tag: 1, selection: $selection) { EmptyView() }
    return 
        VStack { 
            navigation
            Text("Tap").onTapGesture { self.selection = 1 }
        }
}

edited Nov 06 '19 at 19:08

Koraktor

41,357
10
69
99

answered Oct 17 '19 at 13:50

Narek Ghukasyan

229
3
5

This doesn't really work as when you go back it's not possible to select the same element. – Vladimirs Matusevics Jan 20 '20 at 23:35
1

I used navigationlink in this way and everything worked fine. – Narek Ghukasyan Jan 22 '20 at 12:27
This doesn't work when using a `Form`: ` var body: some View { Form { NavigationLink(destination: Text("View"), tag: 1, selection: $selection) { EmptyView() } Text("Tap").onTapGesture { self.selection = 1 } } } ` NOTE: the `VStack` in the above example isn't needed. – RndmTsk Feb 03 '20 at 19:03
1

Try in this way: VStack { navlink Form} – Narek Ghukasyan Feb 11 '20 at 15:00

score 3 · Answer 7 · answered Apr 13 '22 at 20:46

Setting .opacity(0) on the NavigationLink seems to be the most reliable solution for me because I noticed that it might show the indicators again when messing with the .listStyle property. You will also not lose the highlighted effect.

var body: some View {
    NavigationView {
        List {
            ForEach(items) { item in
                ZStack(alignment: .leading) {
                    NavigationLink(destination: EmptyView()) {
                        EmptyView()
                    }
                    .opacity(0)

                    Text(item.value)
                }
            }
        }
    }
}

score 1 · Answer 8 · answered Oct 31 '20 at 15:31

1

This is what worked for me, just adding an empty NavigationLink in a ZStack

List(viewModel.items, id: \.id) { item in
    ZStack {
        NavigationLink(destination: Destination()) {}
        CustomView(item: item)
    }
}

answered Oct 31 '20 at 15:31

nullforlife

1,354
2
18
30

I tried this and it did not work. I still see the arrow on the right. – thenakulchawla Jul 23 '23 at 22:06

score 1 · Answer 9 · answered Jan 11 '21 at 09:34

Only this worked for me, when I tried to implement button tap inside row in List:

ZStack {
                NavigationLink(destination: FlightBoardInformation(flight: flight), tag: FlightBoardNavigation.toFlightDetailed, selection: $navigation) {
                    EmptyView()
                }
                .frame(width: 0, height: 0)
                .hidden()
                .disabled(true)
                Button(action: {
                        self.navigation = .toFlightDetailed
                }) {
                    Text("\(self.flight.airline) \(self.flight.number)")
                }.buttonStyle(PlainButtonStyle())
            }

score 1 · Answer 10 · answered Jul 09 '21 at 12:25

Although .background(...).opacity(0) works, in a more complex view it expands itself through all the view and conflicts with other elements like buttons.

If you need it inside a List, what worked for me is also marking the NavigationLink as .disabled(true):

    Text(...)
      .background( NavigationLink(...).opacity(0).disabled(true) )

score 1 · Answer 11 · answered May 31 '22 at 02:16

1

Use .background modifier.

ForEach(elements) { e in
  AnyViewYouWantToShow(e)
    .background(
      NavigationLink("", destination: DestinationView()))
        .opacity(0)
    )
}

answered May 31 '22 at 02:16

Benjamin

10,085
19
80
130

This worked for me iOS 15. Just make sure to use the EmptyView() call – philm Jan 27 '23 at 01:58

Jacob Ahlberg · Answer 12 · 2022-11-07T12:52:26.333

Finally found out a way how to avoid the the chevron without doing some tricky ZStacks and other solutions. The only downside is that this is only tested on iOS 16 with the new NavigationPath + NavigationStack.

Instead of using a regular NavigationLink where you apply the hashable object, you'll just use a regular Button and append the object to the NavigationPath.

Example:

@State private var path = NavigationPath()

var body: some View {
    List {
        ForEach(viewModel.customers) { customer in
            Button {
                path.append(customer)
            } label: {
                CustomerCell(customer: customer)
            }
        }
    }
    .navigationDestination(for: Customer.self) { customer in
        CustomerView(customer: customer)
    }
}

For projects using the NavigationBackport (for preparing the new navigation), it might work as well. As you can use NBNavigationPath and append the object to the path with a Button just like the example above.

score 1 · Answer 13 · answered Nov 17 '22 at 10:26

I've also struggled with this recently and I think I've found a solution by using a custom view for the navigation link (it works for me):

struct CustomNavigationLink<D: View, L: View>: View {
  @ViewBuilder var destination: () -> D
  @ViewBuilder var label: () -> L
  
  @State private var isActive = false
  
  var body: some View {
    Button {
      withAnimation {
        isActive = true
      }
    } label: {
      label()
    }
    .onAppear {
      isActive = false
    }
    .overlay {
      NavigationLink(isActive: $isActive) {
        destination()
      } label: {
        EmptyView()
      }
      .opacity(0)
    }
  }
}

And you use like this:

CustomNavigationLink {
  SomeViewHere()
} label: {
  Text("hello world")
}

Amir Khorsandi · Answer 14 · 2021-05-06T13:11:03.320

0

The best workaround for me is using background:

NavigationLink(...) {}
       .opacity(0)
       .background(
         HStack {
           Text("Your custom view without arrow")
         }
       )

Or if you need dynamic height as @turingtested posted use NavigationLink as background

Text("Your custom view without arrow")
        .background(NavigationLink( ... ) {}.opacity(0))

edited May 06 '21 at 13:11

answered Jan 29 '21 at 13:57

Amir Khorsandi

3,542
1
34
38

Switching the hierarchy (i.e. placing the `NavigationLink` in the background of your `HStack`), per the explanation by @turingtested, is better. – Adam Zarn Mar 25 '21 at 13:10

score 0 · Answer 15 · answered Mar 16 '22 at 09:12

though there is lots of solution. I'm posting my one.

var body: some View {
    VStack{
        List{
            ForEach (items){item in
                switch item.onClick {
                    //For SettingsOverviewView
                case .Settings:
                    ZStack{
                        NavigationLink (destination: SettingsMenuView(item: item)){
                            EmptyView()
                        }
                        .opacity(0.0)
                        .buttonStyle(PlainButtonStyle())
                        
                        //some views that you will show as your listItem
                        HStack {
                           Text(item.name)
                              .font(.body)
                           Spacer()
                        }
                    }
                }
            }
            .listStyle(GroupedListStyle())
        }
    }
}

score 0 · Answer 16 · answered Jul 08 '22 at 10:02

A lot of examples playing around with ZStack and .opacity but for my opinion SwiftUI can offer more elegant solution using NavigationLink with isActive parameter that works perfect with .listRowSeparator or .listStyle modificators:

struct HidingNavArrowInList: View {
    
    let planets = ["Mars", "Sun", "Mercury", "Venus", "Jupiter", "Uranus", "Saturn", "Earth"]
    
    @State var selectedPlanet: String?
    @State var showDetailView = false
    
    var body: some View {
        NavigationView {
            List {
                ForEach(planets, id: \.self) { planet in
                    Text(planet)
                        .onTapGesture {
                            segue(planet: planet)
                        }
                }
            }
            .background(
                NavigationLink(isActive: $showDetailView, destination: {
                    if let unwrappedPlanet = selectedPlanet {
                        VStack {
                            Text("This is detail view of \(unwrappedPlanet)")
                        }
                    }
                }, label: {
                    EmptyView()
                })
            )
        }
    }
    
    private func segue(planet: String) {
        selectedPlanet = planet
        showDetailView.toggle()
    }
}

`'init(isActive:destination:label:)' was deprecated in iOS 16.0: use NavigationLink(value:label:) inside a NavigationStack or NavigationSplitView` Deprecated for iOS 16 — Arunavo Ray, Feb 20 '23 at 01:39

score 0 · Answer 17 · answered Feb 15 '23 at 17:05

0

2023 Update

This simple solution works for me:

ZStack {
    CustomCell()  
    NavigationLink(destination: DetailView()) {
     EmptyView()
    }
    .opacity(0)
}

answered Feb 15 '23 at 17:05

Sima Nerush

27
3

score 0 · Answer 18 · edited Aug 07 '23 at 06:37

0

In my case, foregroundColor modifier works for me.

NavigationLink(EmptyView(), label: {
//place your custom view
    Text("your Label")
}).buttonStyle(PlainButtonStyle()).foregroundColor(Color.clear)

edited Aug 07 '23 at 06:37

Ram Chander

1,088
2
18
36

answered Jul 31 '23 at 11:28

arslan raza

1
2

score -1 · Answer 19 · answered Apr 02 '20 at 15:22

You can also do like: This worked for me,

@State var boolValue: Bool = false


                HStack {
                    Text("Your text")
                    Toggle(isOn: $boolValue){
                        Text("")
                    }
                    if boolValue {
                        NavigationLink(destination: DestinationView()) {
                            EmptyView()
                        }.frame(width: 0)
                    }
                }

score -2 · Answer 20 · answered May 07 '20 at 10:11

-2

It also works with any View (not only Text)

ZStack {
    Text("Some text")
    NavigationLink(destination: Text("Hello")) { 
            EmptyView()
    }.frame(width: 0)
}

answered May 07 '20 at 10:11

Roman Mishchenko

1

score -2 · Answer 21 · edited Aug 26 '21 at 13:50

-2

I set the opacity of the navigationLink to zero and it work like a charm

NavigationLink(
    destination: Text("Destination"),
    label: {}
).opacity(0)

edited Aug 26 '21 at 13:50

PRSHL

1,359
1
11
30

answered Jul 19 '21 at 12:39

Mehdi

1,340
1
10
5

SwiftUI NavigationLink Hide Arrow

21 Answers21

Example:

Linked