sidebar overlap
Asked on 2025-06-12
1 search
The sidebar overlap effect in Apple's new design system is achieved by using a floating glass material that allows content to extend underneath the sidebar. This design is implemented using components like NSSplitViewController in AppKit and similar APIs in UIKit and SwiftUI. The sidebar is designed to float above the content, creating a layered effect that can enhance the visual appeal of your app.
For AppKit, you can use the NSBackgroundExtensionView to extend content beneath the sidebar, allowing for a seamless visual experience. This is particularly effective for rich content like maps or artwork, which can extend into the sidebar region without being obscured (Build an AppKit app with the new design).
In UIKit, adopting UITabBarController and UITabGroup allows for automatic adaptivity, enabling the sidebar to float above the app's content. This is particularly useful on iPad, where users can switch between tab bar and sidebar views (Build a UIKit app with the new design).
For SwiftUI, the BackgroundExtensionEffect modifier allows views to extend outside the safe area, creating a mirrored and blurred effect that maintains the visibility of the content while extending its appearance (Build a SwiftUI app with the new design).
These design elements are part of Apple's effort to create more immersive and visually appealing applications across their platforms.
Build an AppKit app with the new design
Update your AppKit app to take full advantage of the new design system. We’ll dive into key changes to tab views, split views, bars, presentations, search, and controls, and show you how to use Liquid Glass in your custom UI. To get the most out of this video, we recommend first watching “Get to know the new design system” for general design guidance.
Build a UIKit app with the new design
Update your UIKit app to take full advantage of the new design system. We’ll dive into key changes to tab views, split views, bars, presentations, search, and controls, and show you how to use Liquid Glass in your custom UI. To get the most out of this video, we recommend first watching “Get to know the new design system” for general design guidance.
Make your UIKit app more flexible
Find out how your UIKit app can become more flexible on iPhone, iPad, Mac, and Apple Vision Pro by using scenes and container view controllers. Learn to unlock your app’s full potential by transitioning from an app-centric to a scene-based lifecycle, including enhanced window resizing and improved multitasking. Explore enhancements to UISplitViewController, such as interactive column resizing and first-class support for inspector columns. And make your views and controls more adaptive by adopting new layout APIs.