TabView more tab has double navigation bar when there's more than five tabs

When there are more than 5 tabs in TabView, the tabs from the 5th and on get put in the "More" tab as a list.

But when each tab has its own NavigationStack, the tabs in "More" would have double navigation bars. The expected behavior is there should be only one navigation bar, and NavigationStack for tabs in "More" should be collapsed with navigation for the "More" tab itself.

Minimal reproducible case:

  1. Run the code below as an app
  2. Navigate to "More" tab
  3. Navigate to "Tab 5" or "Tab 6"
  4. You can see there are two navigation bars stacked on top of each other
struct Item: Identifiable {
    let name: String
    var id: String { name }
}

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

struct ContentView: View {
    let items = [
        Item(name: "Tab 1"),
        Item(name: "Tab 2"),
        Item(name: "Tab 3"),
        Item(name: "Tab 4"),
        Item(name: "Tab 5"),
        Item(name: "Tab 6"),
    ]
    
    var body: some View {
        TabView {
            ForEach(items) { item in
                NavigationStack {
                    List {
                        Text(item.name)
                    }.navigationTitle(item.name)
                }.tabItem {
                    Label(item.name, systemImage: "person")
                }
            }
        }
    }
}

Before iOS 18, I can get around this issue by making my own "More" tab. But now with the expectation that user can re-arrange the tabs and all tabs would show up in the sidebar, the "make my own more tab" approach no longer work very well.

Answered by DTS Engineer in 805210022

The best practice is to limit the number of tabs in a tab view to six or fewer. Please refer to the Tab Views Best Practices in the Human Interface Guidelines. If more than five tabs are necessary, consider using a NavigationSplitView as an alternative.

Here is a screenshot illustrating this problem on an iPhone

The best practice is to limit the number of tabs in a tab view to six or fewer. Please refer to the Tab Views Best Practices in the Human Interface Guidelines. If more than five tabs are necessary, consider using a NavigationSplitView as an alternative.

But in the example above, there are exactly six tabs. If the recommendation is "six or fewer", then I should not have ran into this issue.

There are many cases where it does make sense to have more than 6 top level tabs. In my app, each top level tab providing different ways to view user data. Different user might find different set of views as most useful, and thus customize the tab order to their need.

Switching to NavigationSplitView is not always a good option, because I don't want user to have to go back to a list of tabs to switch between tabs. That defeats the whole point of tabs. Alternatively if I switch between split view and tab view depending on size class, then I would run into issue with state restoration (e.g. infinite scrolling with a paginated server API)

@DTS Engineer, thank you for your comments -- regardless of the alternatives, you do agree with me that there should not be double navigation bars, right?

I mean if you are not planning to fix it, IMO a reasonable thing to do is acknowledge it in documentation for TabView that more than 5 tabs are not going to work on compact size classes when each tab has NavigationStack. So that folks can either decide to use UIKit or redesign their UI interface or do something else

TabView more tab has double navigation bar when there's more than five tabs
 
 
Q