NavigationTitle in LiquidGlass style
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()
}
}
}
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(