Split Views — HIG Playground

Explore iOS NavigationSplitView sidebar and detail layout interactively. Change properties in the control panel to see them reflected on the iPhone screen instantly.

9:41

●●●● WiFi 🔋

⚠️ HIG Violation: Improper split view usage

📚 HIG Guidelines — Try It Yourself

✓ Do — Good Example

✗ Don't — Bad Example

✓ Do This

Maintain context in the sidebar during navigation
Use adaptive layouts for different screen sizes
Highlight the selected item clearly
Support swipe gestures for sidebar toggle

✗ Don't Do This

Force split view on compact (phone) screens
Hide the sidebar without a clear way to show it
Remove selection indication
Make sidebar items too dense

👆 See the bad pattern in the iPhone preview above

Sidebar Width

Narrow

Regular

Wide

Style

Prominent

Balanced

Show Badge

SwiftUI Code

NavigationSplitView { List(selection: $selected) { Label("Inbox", systemImage: "tray") .badge(3) Label("Drafts", systemImage: "doc") Label("Sent", systemImage: "paperplane") } .navigationTitle("Mail") } detail: { DetailView(item: selected) } .navigationSplitViewStyle(.prominent)