Hierarchical Navigation Structures

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Building Hierarchical Navigation Structures

Hierarchical navigation gives users options at the top with a deeper structure underneath. SwiftUI uses the NavigationStack you learned about in the previous lesson to produce single-column navigation. While this works well on small device screens like the iPhone, you can provide more flexible layouts using the NavigationSplitView view, which makes a two or three-column navigation view. In this lesson, you’ll create this view to use hierarchical navigation compatible with multiple platforms.

Initial Starter App
Adufuar Mjenwej Eqw

NavigationSplitView {
  Text("Sidebar")
} detail: {
  Text("Detail")
}
Split Navigation on an iPhone
Cfluq Cupigowuef uk uz uGkidu

Split Navigation on an iPad
Xhnoz Nifasitaah oh uj oSol

Preparing the Sidebar Buttons

With this structure in place, you can fill in the two columns. First, create the sidebar list that will drive the navigation. Above the WelcomeView implementation, add the following code:

enum ButtonViewId: CaseIterable {
  case showFlightStatus
}

struct ViewButton: Identifiable {
  var id: ButtonViewId
  var title: String
  var subtitle: String
}

var sidebarButtons: [ViewButton] {
  var buttons: [ViewButton] = []

  buttons.append(
    ViewButton(
      id: .showFlightStatus,
      title: "Flight Status",
      subtitle: "Departure and arrival information"
    )
  )

  return buttons
}

@State private var selectedView: ButtonViewId?

Creating the Sidebar

Now, create the list for the sidebar. Inside the view body, replace the Text("Sidebar") view with:

// 1
List(sidebarButtons, selection: $selectedView) { button in
  // 2
  VStack {
    Text(button.title)
    Text(button.subtitle)
  }
}
// 3
.listStyle(.plain)
.navigationTitle("Mountain Airport")
Sidebar with First Navigation Link
Coyawum lucw Reztv Piwatoxeim Cimn

Sidebar with Link on iPad
Gijotoy qafd Hexm ax oLiv

Polishing the Links

Before moving to the details view, you’ll improve the button’s appearance from the current plain text. Create a new SwiftUI View named WelcomeButtonView.swift. Replace the default view with:

struct WelcomeButtonView: View {
  var title: String
  var subTitle: String

  var body: some View {
    VStack(alignment: .leading) {
      Text(title)
        .font(.title)
        .foregroundColor(.white)
      Text(subTitle)
        .font(.subheadline)
        .foregroundColor(.white)
    }.padding()
    // 1
    .frame(maxWidth: .infinity, alignment: .leading)
    // 2
    .background(
      Image("link-pattern")
        .resizable()
        .clipped()
    )
  }
}

WelcomeButtonView(
  title: "Flight Status",
  subTitle: "Departure and Arrival Information"
)

WelcomeButtonView(
  title: button.title,
  subTitle: button.subtitle
)
.listRowSeparator(.hidden)
Styled Sidebar Links
Mhlhoh Miyakov Hatkb

Showing the Details

Open FlightStatusBoard.swift inside the FlightStatusBoard group. The contents should look familiar since it’s your WelcomeView.swift from the end of lesson one with a few changes. The view removes the header and image and now expects you to provide a flights parameter with the list of flights.

Flight Status Board
Yfipdm Rdevum Moewn

// 1
switch selectedView {
// 2
case .showFlightStatus:
  FlightStatusBoard(flights: flightInfo.flights)
// 3
default:
  Text("Please select an option from the sidebar")
}
Split navigation on an iPhone changes between views.
Gsdur banagutaur oq up uCwoyi sfarbeh yesmoej dounk.

The split navigation on an iPad.
Wxu qwfad jizumubeil ol eg eNav.

Passing Data Between Views in Hierarchical Navigation

The basics of passing data around the navigation stack are simple. You can send the data as a read-only variable or pass a binding to allow the child view to make changes you want reflected in the parent view. That works well for direct cases, but as the view hierarchy’s size and complexity increase, you’ll find that sending information becomes more complicated.

Navigation diagram
Hidequriop teubkar
See forum comments
Download course materials from Github
Previous: Introduction Next: Demo