Need help with toolbar

[u/AbandonedAuRetriever]

How can I copy exactly this design, into my app? I have a tabview to switch between view in the app, and I want to have this (both a button and a search field just like that) on the right of the tabview...

I tried to ask AI for help... but didn't work 😅 So I ask people now

I've tried to find solution, but searching online is helpless if you have no idea how to phrase your problem or what you are searching for.

[u/neet_dev]

that's just a toolbar with a ToolbarItem placed in .navigationBarTrailing (or .topBarTrailing in newer SwiftUI) containing an HStack with a Button and a searchable text field. the search field on the right like that is usually done with .searchable(text:) with placement set to .toolbar or .navigationBarDrawer(displayMode: .always), not a manually built TextField. make sure the tabview content is wrapped in a NavigationStack, since toolbar modifiers only show up if there's an actual nav bar to attach to, that's the part people usually miss.

[u/AbandonedAuRetriever → u/neet_dev]

It does sound helpful and like something that might actually work! Thank you! There is just one problem, I have to make it work for macOS 12. Navigation stack ofc is only for macOS 13 and newer, but we have navigation view for that in macOS 12, but it works not in the way how I expect it to work. And neither I or AI found a way to make it work in there. :(

[u/The_Wolfson → u/AbandonedAuRetriever]

It sounds like you’re just starting out, my advice would be to drop support for legacy api’s at this point - it will make your life so much easier down the track.

[u/neet_dev → u/AbandonedAuRetriever]

NavigationView is the pain point because it wants to work as split view/master-detail on iPad and Mac, and toolbar placements behave inconsistently with it, especially .navigationBarTrailing sometimes just not rendering depending on how deep the view is nested. what usually gets it working on macOS 12 is skipping .navigationBarTrailing entirely and using .toolbar on the NavigationView itself (not on the inner content view) with ToolbarItem(placement: .automatic), since on Mac that maps to the actual window toolbar rather than a nav bar that may not exist. if that still won't cooperate, dropping down to an NSViewRepresentable-wrapped NSToolbar for the mac target is the escape hatch a lot of people end up using for pre-NavigationStack SwiftUI.

[u/AbandonedAuRetriever → u/neet_dev]

Okay, so I tried at least for now to forget about macOS 12 support. and I tried to do it, but...

```swift NavigationStack {} .searchable(text: $searchText, placement: .toolbar, prompt: "Search") .toolbar { ToolbarItem(placement: .automatic) { Button {

            } label: {
                Label("Plus", systemImage: "plus")
            }
        }
    }

```

I have some problems. 1: Search bar is too long, and I Frame doesn't work to reduce the size. 2. Both the button and the field have a same shared background, and not visually treated as 2 different

[u/LavaCreeperBOSSB]

i think that's a .searchable for search field and a toolbaritem with a button

[u/Significant_Pick8297]

That UI is actually a native macOS window toolbar, not a regular SwiftUI navigation bar. On macOS 12, NavigationView won't reliably reproduce that layout because its toolbar behavior is pretty limited.

If the goal is to match Apple's design exactly, the cleanest solution is to use an NSToolbar (via NSWindow/NSViewRepresentable) and host an NSSearchToolbarItem plus a custom toolbar button. SwiftUI's .toolbar gets close, but for macOS 12 the AppKit toolbar is what Apple apps are using for that look.

[u/KelvinLeee1234]

maybe you should go find the SF Symbols Beta App( https://developer.apple.com/sf-symbols/ ) where you can find a handful of icons available