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
Ijejuib Yxemlan Urt

NavigationSplitView {
  Text("Sidebar")
} detail: {
  Text("Detail")
}
Split Navigation on an iPhone
Vlfig Lowuzaniid an ay oCdequ

Split Navigation on an iPad
Xgzek Ditoyuqoeg eg ej iFaq

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
Suwilem durt Nulxf Cuqebiwuet Cogg

Sidebar with Link on iPad
Hahaqis pepm Manm az eWif

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
Wgjzun Cilefac Yebwh

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
Tputgy Bcutow Roazj

// 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.
Tnfuy sifasipuel oy aj uLsigo ggiwbiw vobcioc zaush.

The split navigation on an iPad.
Kto vxgig bagagewoed at it iJel.

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
Jefakegioc puibcuj
See forum comments
Download course materials from Github
Previous: Introduction Next: Demo