Split Views

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 🔋
Mail
📥 Inbox 3
📄 Drafts
Sent
🗑 Trash
Favorites
⚠️ 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

Narrow
Regular
Wide
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)