Building a Tab Bar
Group screens under a TabView with labels.
Building a Tab Bar is a free SwiftUI Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What a Tab Bar Does
A tab bar sits at the bottom of your app and lets people jump between a few top-level screens with one tap. 📱
Meet TabView
In SwiftUI you build that bar with TabView. It holds several screens and shows only one at a time.
TabView {
HomeScreen()
SettingsScreen()
}Each Child Is a Tab
Every view placed directly inside TabView becomes one tab. Two child views means two tabs in the bar.
Labeling a Tab
Without a label a tab shows nothing useful. The tabItem modifier gives each tab its icon and text.
HomeScreen()
.tabItem {
Label("Home", systemImage: "house")
}Using Label Inside tabItem
Inside tabItem you usually put a Label, which pairs a title with an SF Symbol for a clean, native look.
A Two-Tab Example
Here a full TabView shows a Home tab and a Settings tab, each with its own icon and screen.
TabView {
HomeScreen()
.tabItem { Label("Home", systemImage: "house") }
SettingsScreen()
.tabItem { Label("Settings", systemImage: "gear") }
}One Screen at a Time
TabView keeps every tab alive but only shows the selected one. Tapping another tab swaps the visible screen instantly.
Where to Place TabView
Make TabView the root view of your app so the bar stays visible no matter which tab is active.
Keep Tabs Few
iOS shows up to five tabs comfortably. Aim for three to five clear sections so users never feel lost. ✨
Tabs Are Independent
Each tab manages its own content. Scrolling or editing in one tab does not reset the others when you switch.
Native Feel for Free
Because TabView is built in, you get the standard look, blur, and animations users already expect from iOS.
Quick Check
Let us check how you give a tab its icon and title.
Recap: Building a Tab Bar
A TabView turns each child view into a tab, and tabItem gives every tab its label so users move between screens with one tap. 🎉
Frequently asked questions
Is the “Building a Tab Bar” lesson free?
Yes — the full text of “Building a Tab Bar” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “Building a Tab Bar”?
Group screens under a TabView with labels. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Building a Tab Bar” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Building a Tab Bar
- Tab Items & Badges
- Selected Tab Binding
- Combining Tabs with Stacks