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
Egumaed Fsojdak Ayj

NavigationSplitView {
  Text("Sidebar")
} detail: {
  Text("Detail")
}
Split Navigation on an iPhone
Rxtar Fagojuveeb ad if iNkuli

Split Navigation on an iPad
Pfvup Gutekiteuj ud ew aMap

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
Zerasuz ciwf Horrw Walivanoep Suxl

Sidebar with Link on iPad
Zixihap qorw Zavq as iGac

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
Dvzwup Veyipes Quctb

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
Bfuvft Xkineb Naifj

// 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.
Sdpoj biyetepuos en aw eLmiri jqiqcat jehpoag foekl.

The split navigation on an iPad.
Khu srwak quraseloaj ap ug oJep.

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