Footer of section of list shown as a sidebar panel in NavigationSplitView is missing

Question

I am dabbling with the NavigationSplitView introduced this year.

I have a funny behaviour when I use a list with several sections in the side panel, where the sections have footers: those footers are not displayed at all, but only when used in the side panel.

Here's my List in a separate view:

struct SampleListWithSections: View {
    var body: some View {
        List {
            Section {
                Text("Cell")
            } header: {
                Text("Header")
            } footer: {
                Text("Footer")
            }
            Section {
                Text("Cell2")
            } header: {
                Text("Header2")
            } footer: {
                Text("Footer2")
            }
        }
    }
}

When I use this view as the root view, everything works as expected …

@main
struct poc_Navigation2App: App {
    @StateObject private var appModel = AppModel.mock
    
    var body: some Scene {
        WindowGroup {
            SampleListWithSections()
        }
    }
}

… as in: the footer is shown.

But when I use my List view within NavigationSplitView like so …

@main
struct poc_Navigation2App: App {
    @StateObject private var appModel = AppModel.mock
    
    var body: some Scene {
        WindowGroup {
            NavigationSplitView {
                SampleListWithSections()
            } detail: {
                Text("Unimplemented Detail View")
            }
        }
    }
}

… the footer is omitted …

Am I "holding it wrong" or is this a bug? If the latter, is it a known bug?

Answer 1

When you use a list as a sidebar in a NavigationSplitView, it defaults to using the list style called, unsurprisingly, SidebarListStyle - the equivalent to explicitly adding .listStyle(.sidebar) as a modifier to your list.

This style formats sections with bold headers, makes the section collapsible, and (crucially) doesn't display footers.

You can choose your own list style for your sidebar, though. For example, you could set it to an inset grouped style:

List {
  // ...
}
.listStyle(.insetGrouped)

This will display your footers, and for the most part your sections may look similar to those in the default styles. However, they won't be collapsible in the same way, and the header text will be much smaller.

You can partly compensate for the change in header style by also using the .headerProminence(.increased) modifier on some or all of your sections if you need to.