5 minute read

Tab bar in Liquid Glass

This article is part of the “Liquid Glass” series. If you haven’t read the first post, start with Liquid Glass — Introduction to understand the material and its uses before diving into .glassEffect and buttons.

📦 All samples are available on GitHub

The tab bar is no longer an opaque strip: it now floats above content on a Liquid Glass surface. It inherits translucency, vibrancy, and contextual reading of the background. If you recompile your app for iOS 26, the system updates the look automatically and enables the new capabilities without rebuilding your architecture.

Apple is deprecating the tabItem(_:) modifier in favor of the new structural model based on Tab within TabView.

How it behaves

On iPhone, the bar can collapse on scroll to prioritize content and return when the user reverses the gesture. The pattern is designed for feeds and long lists: less chrome, more content, with system transitions.

In addition, the platform introduces a bottom accessory that lives above the tab bar (mini-player, recording, etc.). Its presentation changes with placement (compact/expanded) and should adapt to the bar’s visibility so it doesn’t fight for space or hierarchy.

Search: a tab or integrated (choose well)

Liquid Glass normalizes two equally valid patterns:

  • Search as a destination: giving it a dedicated tab prioritizes discovery and search-based navigation as a primary activity.

  • Integrated search: the field lives within the structure and compacts/expands based on context and platform, preserving the glass’s visual continuity. Useful when search supports rather than leads.

This is a product decision: if people reach almost everything by searching, a dedicated tab speeds up the task; if they mainly refine results, the integrated pattern reduces friction and avoids noise in top-level navigation.

Personalization that fits the system

Active item color (tint). Use the container’s tint to mark the selected state without over-colorizing the interface. You keep hierarchy, accessibility, and coherence with Liquid Glass.

Bar background. You can request a bar material (the system look) or provide your own ShapeStyle (translucent color/gradient) and control its visibility. If you want the same look across all tabs, apply these adjustments in a common container to avoid repetition.

Collapse on scroll. Enable it only where it improves reading continuous content; if your screen is highly transactional, keeping the bar fixed can be clearer.

Accessibility and legibility (the important part)

Liquid Glass prioritizes adaptive legibility: the bar and its content adjust luminance and contrast with the background. Don’t spoil this by adding veils, shadows, or manual borders that compete with the system’s edge effect. If you use very dark/saturated backgrounds, force the bar’s color scheme to guarantee readable text and symbols; the goal is for color to serve the task, not the other way around.

TabView Bottom Accessory

It’s a persistent surface that lives above the tab bar and follows the whole app. It’s ideal for global controls (now playing audio, recording, calls), not for screen-specific actions. When the bar collapses on scroll on iPhone, the accessory changes placement so it doesn’t compete for space.

How it’s placed and how it behaves:

  • It has two placement states you can read from the environment: expanded (floating above the bar or at the bottom of content if there’s no bar) and inline (integrated in the bar itself). Use that value to compact/expand your content (less text, denser icons in inline).

  • The transition from expanded → inline typically happens when the tab bar minimizes on scroll; the system synchronizes both behaviors to preserve hierarchy and visual rhythm.

Design (how to make it read well with Liquid Glass):

  • In expanded, give it its own material/glass background (coherent with Liquid Glass) to activate vibrancy and preserve contrast over changing content; in inline it usually inherits from the bar. Keep text and icons in semantic styles (primary/secondary) and reserve tint for controls.

  • Think adaptive density: one-line titles, discreet subtitles, and controls that scale well between expanded/inline without hierarchy jumps. (Majid and Create with Swift show this compaction pattern.)

When to use it (and when not to):

  • Use it when the value is cross-cutting across all tabs (e.g., playback in Apple Music). Avoid it for screen-specificactions (pay, share, filter), which should live in local UI.

Accessibility and coherence:

  • Liquid Glass adjusts luminance and contrast; don’t add veils or extra overlays that break the edge effect and the natural separation of bars/accessories. Maintain touch sizes and clear hierarchy between title, artist/state, and iconography.

TabView Bottom Accessory

Tab bar customization: per-tab vs. app-wide

What you can customize: the active item tint, the bar background (system material, color, or gradient), and the bar’s color scheme to ensure text and icon legibility. This is done with toolbar modifiers targeted at .tabBar: toolbarBackground(_:for:), toolbarBackgroundVisibility(_:for:), and toolbarColorScheme(_:for:).

Apple indicates these modifiers accept a ShapeStyle (materials like .bar, colors, or gradients) and control the bar’s visibility and scheme.

Per tab (different look by section)

Apply the modifiers in each Tab’s content (not on TabView).

This way, for example, one tab can use bar material and another can use a translucent gradient with a dark scheme so labels appear light.

This approach is recommended when the visual identity or context of each section changes. (The key is that bar background/visibility modifiers live in the child that renders that bar.)

App-wide (one setup for all).

If you want the same background and scheme across all tabs, wrap your Tabs in a common container (for example, a Group) and apply the three modifiers there.

All tabs will inherit the same material/gradient, visibility, and scheme without repeating them one by one. (A community-recommended pattern aligned with how SwiftUI propagates these bar values from the content that owns them.)

When to use each approach

  • Choose per tab if your information or brand varies by section and you need a different tone (always guarding contrast with toolbarColorScheme).

  • Choose app-wide if you want global consistency and less maintenance; it’s the simplest way to “tint” the tab bar with your gradient/transparency throughout the app.

Relation to Liquid Glass and collapse

These adjustments coexist with the collapse-on-scroll behavior: the platform continues applying edge effects, and the bar continues minimizing on iPhone if you’ve enabled it, maintaining legibility over your material/gradient. (If you choose very dark or saturated backgrounds, pair them with a suitable bar scheme so labels and glyphs remain readable.)

Tips

  • Applying toolbarBackground or toolbarColorScheme on TabView has no effect; they must live in the content the bar accompanies.

  • If you combine materials with very intense gradients, prioritize legibility: toolbarBackgroundVisibility(.visible, for: .tabBar)and a coherent toolbarColorScheme prevent the bar’s content from “disappearing” on certain backgrounds.

Source code & samples

  • Series repository: All samples repository are available on GitHub

Meta

Updated: