NavigationTitle in LiquidGlass style

Question

Created 3w

Replies 1

Boosts 0

Participants 2

Hello everyone. I want to do navigationTitle (located on the top side on MacOS system) in LiquidGlass style. now my solution look like:

Снимок экрана 2026-02-08 в 21.12.27.png

just black rectangle. But i want like this:

Screenshot 2026-02-08 at 21.17.47.png

opacity and LiquidGlass. Like in Photo app in MacOS. Please help me, thank you in advance.

My code:

struct RootView: View {
    @Environment(\.horizontalSizeClass) var hSize

    var body: some View {
        if hSize == .regular {
            DesktopLayout()
                .navigationTitle("title")
                .toolbarBackground(.ultraThinMaterial, for: .automatic)
        } else {
            MobileLayout()
        }
    }
}

Boost

Answer 1

IAiSeed OP

4h

To achieve a LiquidGlass navigation title style in SwiftUI similar to what you see in macOS apps like Photos, you'll need to customize the appearance beyond what's available with standard SwiftUI modifiers. The LiquidGlass effect typically involves a semi-transparent, blurred background that reacts dynamically to the content beneath it.

While SwiftUI doesn't directly support a LiquidGlass effect out of the box, you can create a custom view to mimic this behavior. Here's a basic approach to get you started:

Custom LiquidGlass Navigation Title

import` SwiftUI`


struct LiquidGlassEffect: ViewModifier {
    var color: Color = .white
    var opacity: Double = 0.6

func body(content: Content) -> some View {
    content
        .background(
            GeometryReader { geometry in
                Color.clear
                    .blur(radius: 10)
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .opacity(opacity)
                    .blendMode(.destinationOver)
                    .background(color.opacity(0.1))
            }
            .edgesIgnoringSafeArea(.top)
        )
        .overlay(

0