How to add a Toolbar at the window bottom?

Question

On my macOS app, I have a main toolbar at top. However, I would like to add a new bottom toolbar at bottom (smaller).

Like that for example:

It seems there is no way to do this on macOS as on iOS:

.toolbar {          
    ToolbarItemGroup(placement: .bottomBar) {
        // add wine
        AddButton()
        Spacer()
    }
}

.bottomBar doesn't exist on macOS.

Well, just before creating a custom view/content with some buttons, I would like to be sure there is no official way to do that on macOS (with SwiftUI only...).

Malliemallin

Purely in the interest of helping you feel easy about building your own, I'd like to point out that this is not a common UI pattern on macOS, so I would somewhat expect for this to require custom work. To quote the relevant HIG section: "In iPadOS and macOS, a toolbar appears at the top of a screen or window." – Rapture

I agree... however, on iPad, I can create a toolbar at bottom with .toolbar modifier. – Malliemallin

pls don't do this on macos, you need to redesign per platform.(hi alexs) – Geoff

Answer 1

I love Apple's declarative unified Toolbar API in SwiftUI. See here and here. It allows the multiplatform developer the flexibility to design her app however she wants - with one unfortunate exception: It does NOT allow bottom toolbars on macOS. I get @Alex Fringes and @aehlke point that this exception conforms to Apple's official human interface guidelines which state that for iPadOS and macOS, toolbars should appear only at the top of the window. But, IMHO this guideline makes no sense - at least for my application. In my app, I have many buttons and many sliders to give the user a lot of control over the display. These items logically fall into two groups. So it makes sense for my app to place one group at the top and the other at the bottom. However, the lack of support for .bottomBar for macOS prohibits me from using SwiftUI's Toolbar API. I have had to implement it all manually.

It is ridiculous that I can have both a top and bottom toolbar on a small-screen device (e.g., my iPhone) but not on a large-screen device (e.g., my Mac). I hope Apple fixes this!

Extremity

I realized the exception where toolbar would be useful at the bottom is for dialog confirmation buttons – Geoff

Answer 2

You can use safeAreaInsets instead

 .safeAreaInset(edge: .bottom, content: {
    // Buttons go here
    // add padding and background
  }

Valenza