How to keep Large Title and Toolbar Button on the same line while preserving native button styling?

1 week ago 8
ARTICLE AD BOX

I am trying to achieve a specific layout in SwiftU. I want a Large Title ("Monthly Overview") and a native-styled action button ("+") to appear on the exact same horizontal line.

Goal:

Large Title: Left-aligned, using .largeTitle.weight(.bold). Large Title: Left-aligned, using .largeTitle.weight(.bold). Button: Must have the exact same style as a native toolbar button (inheriting global tint, proper font weight, and system interaction behavior). Alignment: They must be on the SAME LINE.

In SwiftUI, it seems you can have one or the other, but not both on the same line:

If I use .toolbar: The button looks perfect (styled correctly by iOS), but the layout is constrained. The title is either centered (.principal) or pushed to a separate line (.navigationTitle large mode). Placing them both in the toolbar with .topBarLeading and .topBarTrailing prevents the title from being a true largeTitle. If I use a custom HStack header: I can align them on the same line perfectly, but the button loses its native styling. I have to manually replicate the font size, weight, and tint. This is brittle and doesn't feel or look exactly like the native toolbar buttons used elsewhere in the app (like the back button or ellipsis menu).

What has been tried:

Attempt 1: Custom HStack (Alignment OK, Styling WRONG)

HStack(alignment: .firstTextBaseline) { Text("Monthly Overview").font(.largeTitle.weight(.bold)) Spacer() Menu { ... } label: { Image(systemName: "plus") // Manually styled, never looks quite "native" } }

Attempt 2: Toolbar (Styling OK, Alignment WRONG)

.toolbar { ToolbarItem(placement: .topBarTrailing) { // Button looks perfect here, but is stuck in the nav bar // while the title is in the ScrollView below it. } }

Attempt 3

ZStack / Overlay (Impossible to align perfectly) Tried overlaying the toolbar button over the scroll content, but keeping it perfectly in line with the text baseline as the user scrolls or as dynamic type changes is a nightmare.

Is there any way to "borrow" the native toolbar button style for a button placed inside a custom View, or conversely, a way to force the Navigation Bar to allow a left-aligned Large Title and a Trailing button on the same horizontal line?

Environment: iOS 26.0+, SwiftUI, Xcode 16+

Read Entire Article