Here’s a SwiftUI implementation of a multi-level navigation app with lists at each level, and a demonstration of how to drill down to more detailed information:

Explanation:

1. Item Data Model:
   • id: Unique identifier for each item.
   • name: Item name (displayed in the list).
   • details: Detailed information about the item.
   • subItems: An optional array of Item objects representing sub-items at the next level of navigation. If an item has sub-items, it’s treated as a category.
2. ItemDetailView:
   • This view is used for both the top-level items and the sub-items (if any).
   • It displays the item’s name and details.
   • If the item has subItems, it renders a List of those sub-items with NavigationLinks to their own detail views (allowing you to go deeper into the navigation hierarchy).
3. ContentView:
   • items array holds the top-level items (categories).
   • NavigationView provides the navigation structure.
   • List displays the items.
   • NavigationLink is used to navigate to the ItemDetailView for the tapped item.

import SwiftUI

// Data Model
struct Item: Identifiable {
    let id = UUID()
    let name: String
    let details: String
    let subItems: [Item]? // Optional sub-items for deeper levels
}

// Detail View
struct ItemDetailView: View {
    let item: Item
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(item.name)
                .font(.title)
            Text(item.details)
                .padding(.top, 10)
            
            if let subItems = item.subItems {
                List(subItems) { subItem in
                    NavigationLink(destination: ItemDetailView(item: subItem)) {
                        Text(subItem.name)
                    }
                }
            }
        }
        .padding()
        .navigationTitle(item.name)
    }
}

// Main View
struct MultilevelNavigation: View {
    let items: [Item] = [
        Item(name: "Category A", details: "Description for Category A", subItems: [
            Item(name: "Item A1", details: "Welcome to Item A1", subItems: nil),
            Item(name: "Item A2", details: "Welcome to Item A2", subItems: nil)
        ]),
        Item(name: "Category B", details: "Description for Category B", subItems: [
            Item(name: "Item B1", details: "Details for Item B1", subItems: nil),
            Item(name: "Item B2", details: "Details for Item B2", subItems: nil)
        ]),
        // ... add more items and sub-items as needed
    ]
    
    var body: some View {
        NavigationView {
            List(items) { item in
                NavigationLink(destination: ItemDetailView(item: item)) {
                    Text(item.name)
                }
            }
            .navigationTitle("Main Menu")
        }
    }
}


#Preview {
    MultilevelNavigation()
}

How it Works:

1. The main screen (ContentView) shows a list of top-level items (e.g., categories).
2. Tapping an item (category) pushes its ItemDetailView onto the navigation stack.
3. If the item has sub-items, the ItemDetailView displays another list of sub-items.
4. Tapping a sub-item pushes another ItemDetailView onto the stack, displaying the sub-item’s details.
5. You can continue navigating deeper into the hierarchy if there are more sub-items.
6. The back button in the navigation bar allows you to go back to the previous level.

Key Points:

• Recursive Navigation: The ItemDetailView is designed to handle both top-level items and sub-items, making it suitable for multi-level navigation.
• Data Model: The Item struct with its subItems property allows you to define a hierarchy of items.
• Dynamic Lists: List is used to efficiently display the items at each level.