Navigation Bars — HIG Playground

Explore iOS Navigation Bar Large Title and Inline styles interactively. Change properties in the control panel to see them reflected on the iPhone screen instantly.

9:41

●●●● WiFi 🔋

General

About

›

Software Update

›

iPhone Storage

›

Settings

Accessibility

›

Privacy & Security

›

Notifications

›

Display & Brightness

›

Wallpaper

›

⚠️ HIG Violation: Improper navigation bar

📚 HIG Guidelines — Try It Yourself

✓ Do — Good Example

✗ Don't — Bad Example

✓ Do This

Use a clear, concise title that describes the current view
Use Large Title style for top-level navigation
Use the standard back button to return to the previous screen
Place controls that affect the current view in the trailing area
Use SF Symbols for bar button items when possible

✗ Don't Do This

Don't use more than 2-3 trailing bar button items
Don't replace the standard back button with a custom one unnecessarily
Don't use overly long titles that get truncated
Don't hide the navigation bar in the middle of a navigation flow

👆 See the bad pattern in the iPhone preview above

Leading Item

None

Back Button

Trailing Items

None

Edit

Add (+)

Edit + Add

Title Text

Show Search Bar

SwiftUI Code

NavigationStack { List { // content } .navigationTitle("Settings") .navigationBarTitleDisplayMode(.large) }