Let's build the Apple Music iOS 26 Tab Bar in Liquid Glass

With just a few simple steps you can have a super impressive Liquid Glass tab bar!

The Apple Music app in iOS26 goes all-in in showing what the new Tab Bar can do with the new Liquid Glass design. It has many super cool behaviors.

So how can we build it?!! Let’s get started!

Adding the Core Tabs

To get started, let’s add the 3 core tabs:

With only these few lines of code, the result already looks cool!

Add the Search Tab

Adding the search tab is done in the same way as the other tabs, but the tab role is set to .search:

Just with this change you automatically get a separated search bubble:

Making the Search Interactive

Now the super fun part! Right now, when we click on the search button, it just takes us to a normal search view, behaving like any other tab. Instead, we can make the searching into an interactive experience with a few extra modifications!

The first step is to modify the SearchView to receive the searchText and in order to show the proper search results:

Note that the SearchView MUST be wrapped in a NavigationStack or a NavigationView!!

Next, we will be adding a way to keep track of the search bar presentation and the typed search text in the ContentView:

Next, we will add a searchable modifier to our SearchView as follows:

Note that the .navigationBarDrawer placement here is why the SearchView needs to be inside a NavigationView or NavigationStack.

Finally, we will add an onChange modifier to the TabView, which will toggle the isSearching variable when the user clicks on another tab:

Now that we can wrap it in an animation so the transition between the tabs and search is more smooth.

That’s it! Now you have a pretty impressive interactive search right in your tab bar!

Adding an Accessory View on Top of the Tab Bar

In the Apple Music app, you can always see which song is playing above the tab bar, and you can play / pause that song or fast forward to the next song. Note that this Accessory View is present irregardless of the current tab, so make sure that it is something that is core to your app and required on-screen the whole time!

Here is what it looks like:

So how do we do this? It’s as simple as adding a custom tabViewBottomAccessory to your TabView:

Minimizing Tabs on Scroll

Finally, let’s add one more final touch! Get the tabs out of the way as the user scrolls so they can enjoy the content.

To do this, simply add a .tabBarMinimizeBehavior(.onScrollDown) view modifier to your TabView. That’s it!

With this simple trick, you get this amazing tab bar behavior:

Tab bars have become fun again!