SwiftUI Navigation TabView

SwiftUI Navigation: TabView

Switch between sections with TabView and .tabItem.

Basic TabView

Use TabView to switch between sections.

import SwiftUI

struct TabBasicDemo: View {
  var body: some View {
    TabView {
      Text("Home").tabItem { Label("Home", systemImage: "house") }
      Text("Settings").tabItem { Label("Settings", systemImage: "gear") }
    }
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { TabBasicDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene { WindowGroup { ContentView() } }
}

In the example above, the TabView is used to switch between sections.

Selection & Badges

Track the active tab with @State and add .badge().

import SwiftUI

enum Tab: Hashable { case home, inbox }

struct TabSelectionDemo: View {
  @State private var selection: Tab = .home
  var body: some View {
    TabView(selection: $selection) {
      Text("Home").tabItem { Label("Home", systemImage: "house") }.tag(Tab.home)
      Text("Inbox").tabItem { Label("Inbox", systemImage: "tray") }.badge(3).tag(Tab.inbox)
    }
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { TabSelectionDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene { WindowGroup { ContentView() } }
}

In the example above, the TabView is used to switch between sections.