Apple's iOS 26 "Liquid Glass" introduces a new UI paradigm of a tab bar with a separate floating action button off to the side. This seems to be a common UI design used in many of Apple's stock iOS 26 apps.
Seen here in the News app in Xcode 26.0 beta iOS Simulator:
vs. the same app in iOS 18:
What stock UI component is Apple using to implement this new Liquid Glass tab bar with a floating "Following" or "Search" action button (without text label) separate from the other four icons?
How can I implement this same design in my iOS 26 app using stock iOS controls?
This is a TabView
with one of the Tab
s having the role of .search
.
TabView {
Tab("One", systemImage: "1.circle") {
}
Tab("Two", systemImage: "2.circle") {
}
Tab("Three", systemImage: "3.circle") {
}
Tab("Four", systemImage: "4.circle", role: .search) {
NavigationStack {
}
}
}
.searchable(text: $search)
By adding .searchable
to the TabView
and a NavigationStack
in the search tab, a search bar appears to replace the tab bar when you switch to that tab, just like in the News app.