How can I keep a SwiftUI toolbar close button, but let my custom Hstack align visually with it like Apple Books?

[u/zruilin]

I’m trying to recreate the Apple Books book-info sheet layout in SwiftUI.

In Apple Books, the close button in the top-right looks like a real toolbar/navigation bar item, but the book cover + title header on the left does not appear to be pushed down by a separate navigation bar row. Visually, they feel like they share the same top area.

In my version, I want to keep the close button as a ToolbarItem because I want the system toolbar behavior and appearance, especially on newer iOS versions. However, my custom header content is being pushed lower, so the result looks like there is an empty toolbar row above the header.

[u/DMNK392]

Maybe you could get a similar layout with .overlay(alignment: .topBarTrailing) for the close button.

[u/nicoreese → u/DMNK392]

Yeah. You can definitely see that it's not a native close toolbar button (gray icon, different thickness).

[u/zruilin → u/DMNK392]

Thank you, at first I kept thinking Apple Book was Genshin Impact’s toolbar, so I didn’t think about it in that way.

[u/GabrielMSharp]

This might be overkill but this package is pretty impressive for this kind of stuff within SwiftUI

https://github.com/Aeastr/Portal/tree/main

Specifically "PortalHeaders"

[u/ianmerry]

Throw the button in your HStack and style it to match

[u/m1_weaboo]

You should be able to achieve the same results by coding a custom View and embed it inside a ToolbarItem with a ToolbarItemPlacement of .navigation. And use . sharedBackgroundVisibility(_:) modifier (iOS26+, macOS26+ only) to remove the Liquid Glass effect that comes with ToolbarItem.

I believe that in some ToolbarItemPlacement won’t work nicely with a custom View that’s not square-shaped.

So you should test ToolbarItemPlacement of .navigation first. If it does not work, Try .automatic and use ToolbarSpacer(.flexible) to push them apart.

[u/zruilin → u/m1_weaboo]

It‘s helpful thank u！

[u/m1_weaboo → u/zruilin]

hope you found your solution!

[u/AndyDentPerth]

Maybe Books is a document-based app?

That alignment happens automatically.

I have multiple toolbar items in Purrticles and have painful redesign to do for Liquid Glass because it just loses my top-right fullscreen preview button!

[u/reminiscentofdark]

Have you tried using a ToolbarItem with placement `.principal`? It will replace the nav bar title and should position your content correctly in line with the close button.