In this article, we’ll see how to hide the navigation arrows or disclosure indicators generated by a NavigationLink in SwiftUI.
For this example, the first thing we’ll do is create a list or table using List and ZStack as follows:
import SwiftUI
struct ContentView: View {
var body: some View {
List {
ZStack(alignment: .leading){
}
}
}
}Next, to be able to use NavigationLink and go to another view when the user taps, we are going to create a new SwiftUI View file in Xcode, we have to go to File -> New -> File from Template…
and once you select it, we will choose to create a new SwiftUI View
In the SwiftUI view file name, I’ve named it “ListView.swift,” but you can use any name you like.
Once we’re inside our new view called “ListView.swift” in Xcode, we write some very simple code that will serve to present our new view using NavigationLink.
import SwiftUI
struct ListView: View {
var body: some View {
Text("Welcome to View 2")
}
}As you can see, the code is very simple. Now we return to our “ContentView.swift” file and add the NavigationLink to navigate between views, as follows:
struct ContentView: View {
var body: some View {
List {
ZStack(alignment: .leading){
NavigationLink(destination: ListView()) {
}
}
}
}
}Now, next to our first and only item, a small arrow appears, indicating that tapping on the screen will open another view. In Xcode, our code would look like this:
Hiding the navigation arrow or disclosure indicator that the NavigationLink creates
As we create links to views with NavigationLink, the system automatically adds a small navigation arrow or disclosure indicator. If you want to remove or hide these navigation arrows, SwiftUI doesn’t offer a specific modifier to control their visibility. However, you can use the .opacity(0) modifier to hide the arrows.
In our example, we add the .opacity(0) modifier as follows:
struct ContentView: View {
var body: some View {
List {
ZStack(alignment: .leading){
NavigationLink(destination: ListView()) {
}
.opacity(0)
}
}
}
}Which in Xcode would give the following result:
As you can see, the small navigation arrow or disclosure indicator has disappeared, and if we tap on our empty item, thanks to the link we created with NavigationLink, we can direct the user to a new view, in this case the one we created earlier, “ListView.swift.”
If you have any questions about this article, please contact me and I’ll be happy to help 🙂 You can contact me on my X profile or on my Instagram profile.
