DEV Community

Cover image for Navigation Bar Tutorial in iOS 18 - #30DaysOfSwift
Vaibhav Dwivedi
Vaibhav Dwivedi Subscriber

Posted on • Edited on

Navigation Bar Tutorial in iOS 18 - #30DaysOfSwift

Day 2: Wandering around the multiple paths 🛣️

In the third post of #30DaysOfSwift series, I am going to teach you how to make a sticky navigation bar.

The output would look something like this:

Image description

Steps:

  • Create a new SwiftView file called "HomeView".

  • Replace the ContentView() with HomeView() in YourAppNameApp.swift (In this case, my project is called ShipiOS. Thus, file name is ShipiOSApp.swift)

var body: some Scene {
        WindowGroup {
            HomeView()
        }
    }
Enter fullscreen mode Exit fullscreen mode
  • Lastly, add the following code in your HomeView() file:

Image description

Code:

struct HomeView: View {
    @State private var selectedTab = 0 // Track the selected tab
    let generator = UIImpactFeedbackGenerator(style: .light) // For Haptics

    @EnvironmentObject var userCommonData: CommonData

    var body: some View {
        TabView(selection: $selectedTab) {
            ContentView() // Replace with your view
                .tabItem {
                    Label("Home", systemImage: "house")
                }
                .tag(0)

            SecondView() // Replace with your view
                .tabItem {
                    Label("Chats", systemImage: "tray")
                }
                .tag(1)

            ThirdView() // Replace with your view
                .tabItem {
                    Label("Profile", systemImage: "gearshape")
                }
                .tag(2)
        }
        .accentColor(Color("AppSecondaryColor"))
        .onChange(of: selectedTab) {
            generator.impactOccurred()
        }
    }

}
Enter fullscreen mode Exit fullscreen mode

Does it work? Let me know :)

Happy coding!

Top comments (0)

Heroku

Build AI apps faster with Heroku.

Heroku makes it easy to build with AI, without the complexity of managing your own AI services. Access leading AI models and build faster with Managed Inference and Agents, and extend your AI with MCP.

Get Started

👋 Kindness is contagious

Explore this insightful write-up, celebrated by our thriving DEV Community. Developers everywhere are invited to contribute and elevate our shared expertise.

A simple "thank you" can brighten someone’s day—leave your appreciation in the comments!

On DEV, knowledge-sharing fuels our progress and strengthens our community ties. Found this useful? A quick thank you to the author makes all the difference.

Okay