We are going to setup some basic tabs, so open ContentView and change the current body with:

TabView {
    Text("Home")
        .tabItem {
            Image(systemName: "cup.and.saucer")
            Text("Menu")
        }
    Text("Offers")
        .tabItem {
            Image(systemName: "tag")
            Text("Offers")
        }
    Text("My order")
        .tabItem {
            Image(systemName: "cart")
            Text("My Order")
        }
    Text("Info")
        .tabItem {
            Image(systemName: "info.circle")
            Text("Info")
        }
}

Icons

Icons used in the previous sample as coming from SFSymbols, a set of free to use icons from Apple. Download the SF Symbols app to browse all the options available.

Creating Pages

Now create a Pages group and create one view per page, such as

  • MenuPage
  • OffersPage
  • OrderPage
  • InfoPage

Replace the Text views in the TabView with these new views. Your ContentView should look now like:

TabView {
    MenuPage()
        .tabItem {
            Image(systemName: "cup.and.saucer")
            Text("Home")
        }
    OffersPage()
        .tabItem {
            Image(systemName: "tag")
            Text("Offers")
        }
    OrderPage()
        .tabItem {
            Image(systemName: "cart")
            Text("My Order")
        }
    InfoPage()
        .tabItem {
            Image(systemName: "info.circle")
            Text("Info")
        }
}