Liquid Tab Bar

Don't ship an out of the box Liquid Glass Tab Bar.

iOS Navigation

When an app uses the standard iOS navigation, it inherits instant muscle memory, users immediately know how to swipe, tap, and dismiss. However, relying entirely on stock UI components makes an app feel generic.

Liquid Glass

Customization

When major apps like Instagram, Reddit and others adopt Apple's Liquid Glass they use the current system UI while tuning micro interactions, layout and physics to strike a balance between platform familiarity and brand distinction.

Instagram
Reddit

Customizing subtle dynamics preserves native usability while reinforcing visual brand equity. It signals to the user that the app is premium, purpose built rather than a boilerplate view and stock components.


Implementation

𝕏 is the most popular social media app that has yet to implement the iOS 26+ Tab Bar shown here.

Current X Tab Bar

With 𝕏 still holding out on this adoption it signals to my design eye a dated look in need of a quick refresh.

Here are some helpful tips for creating your own Tab Bar for iOS.

  • For well established platforms removing Tab Labels aids in culture, symbology and bypassing the need for language localization. If you are just starting out I'd recommend tab labels for any early adoption phase.
  • In a dark mode UI take advantage of an active background indicator for a more obvious appearance. (See Home icon in the image above.)
  • A subtle icon tap interaction can communicate a high level of detail, which in turn conveys trust as well as delight.
  • This one is obvious but only use .svg (vector) paths for your icons and symbols, it provides crisp resolution, animatable geometry and reduced bundle size.

Content & Control Layer

The entire purpose for Apple to design a dynamic, floating Tab Bar is to display and adapt according to the Content. The entire interface is comprised of two layers, the Content and Control layers.

The Content Layer consists of mostly text, images, videos, inputs, layout, etc.

A Tab Bar, navigation and buttons are ideally what live in the Control Layer and dynamically transition or animate according to the Content Layer.

The purpose of the Control Layer combined with Liquid Glass is to focus the user experience on the content in a seamless, unnoticeable and delightful manner.

This scrollable view of a timeline or feed is a great example.

Hiding or minimizing a Tab Bar during downward scroll behavior is a good practice in removing the Control layer during a Content focused state.

Likewise, by keeping the option to interact with the content during a focused state affords the subtle presence of the blue +compose button in the bottom right corner.

These small Control changes may not seem like much, but they do add up to a premium mobile experience when thoughtfully applied to each Content view.


If you are interested...

I built an easy to use, fully customizable TabBar using Liquid Glass and various scroll behaviors to keep the user engaged with the content. Feel free to add it to your next project.