iOS Navigation Patterns

Ios navigation patterns

by wondelai · MIT license · ★ 2,235 on GitHub · updated Sep 10

The tab bar provides access to main app destinations.

# iOS Navigation Patterns

## Tab Bar (Primary Navigation)

The tab bar provides access to main app destinations.

- **Position**: Bottom of screen, always visible (except modals/keyboards)
- **Items**: 2-5 tabs maximum
- **Overflow**: Use "More" tab if >5 destinations needed
- **Selected state**: Fill color indicates active tab
- **Labels**: 10pt SF text
- **Background**: Slightly translucent with background blur ("frosted glass")

**Behavior**:
- Each tab remembers its navigation state
- Tapping active tab returns to root screen of that tab
- Tab bar hidden during modals and keyboard display

Overview

Behavior: - Each tab remembers its navigation state - Tapping active tab returns to root screen of that tab - Tab bar hidden during modals and keyboard display

Manual install (npx, ZIP)

Claude Codenpx skills add wondelai/skills --skill ios-navigation-patterns -g -a claude-code

Claude.ai / desktopZip the folder and upload it under Settings → Capabilities → Skills.

Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

navigation.md4.5 KB

Read navigation.md here

wondelai/main1 file

navigation.md4.5 KB

navigation.md

Show the full text151 lines

ios-navigation-patterns/navigation.md151 lines · 4.5 KB

PreviewCode

Outline

RawView on GitHub

The tab bar provides access to main app destinations.

Position: Bottom of screen, always visible (except modals/keyboards)
Items: 2-5 tabs maximum
Overflow: Use "More" tab if >5 destinations needed
Selected state: Fill color indicates active tab
Labels: 10pt SF text
Background: Slightly translucent with background blur ("frosted glass")

Behavior:

Each tab remembers its navigation state
Tapping active tab returns to root screen of that tab
Tab bar hidden during modals and keyboard display

Back button: Top-left, allows return to previous screen
Actions: Top-right, context-specific actions
Title: Center (scrolled state) or left-aligned large title (unscrolled)

Scroll Behavior:

Large title collapses to compact centered title on scroll
Search bar can move or hide on scroll
Smooth animated transitions between states

Navigating Back

Method	Context
"Back" button (top-left)	Standard navigation
Swipe right from left edge	Standard navigation
"Cancel" / "Done" button	Modal views
Swipe down on content	Modals, fullscreen media

Use modals for focused tasks that shouldn't interrupt context completely.

Slides up from bottom
Previous screen visible (recessed) in background
Dismiss via: close button, swipe down, or completing task

Search UI Patterns

Search Bar Placement

Context	Placement
Primary search (core feature)	Navigation bar, persistent
Secondary search	Below nav, hidden on scroll
List filtering	Above list, inline

Search Behavior

States:

Inactive: Placeholder text, magnifying glass icon
Active/Focused: Keyboard appears, cancel button shows
Typing: Results update (instant or debounced)
Results: Displayed in list below

SwiftUI implementation:

.searchable(
    text: $searchText,
    placement: .navigationBarDrawer(displayMode: .always),
    prompt: "Search items"
)

Search Suggestions

Recent searches
Trending/popular searches
Autocomplete suggestions
Scoped suggestions (filter by category)

.searchable(text: $searchText) {
    ForEach(suggestions) { suggestion in
        Text(suggestion.name)
            .searchCompletion(suggestion.name)
    }
}

Two-Column Layout

┌──────────────────┬────────────────────────────────┐
│                  │                                │
│  Primary List    │     Detail View                │
│  (Sidebar)       │                                │
│                  │                                │
│  Item 1          │     Selected item details      │
│  Item 2 ←        │                                │
│  Item 3          │                                │
│                  │                                │
└──────────────────┴────────────────────────────────┘

Behavior:

Primary column: 320pt default width
Detail column: Fills remaining space
Collapse to single column on compact width

Three-Column Layout

┌────────────┬────────────┬──────────────────────────┐
│  Sidebar   │ Content    │    Detail                │
│            │            │                          │
│  Section 1 │  Item A    │    Item details here     │
│  Section 2 │  Item B ←  │                          │
│  Section 3 │  Item C    │                          │
└────────────┴────────────┴──────────────────────────┘

SwiftUI:

NavigationSplitView {
    Sidebar()
} content: {
    ContentList()
} detail: {
    DetailView()
}

Responsive Behavior

Width	Behavior
Compact (iPhone)	Stack navigation
Regular (iPad portrait)	Two-column or overlay
Regular (iPad landscape)	Three-column available

Best practices:

Show placeholder in detail when nothing selected
Remember selection across rotation
Support column resizing (where appropriate)

1	# iOS Navigation Patterns
2
3	## Tab Bar (Primary Navigation)
4
5	The tab bar provides access to main app destinations.
6
7	- Position: Bottom of screen, always visible (except modals/keyboards)
8	- Items: 2-5 tabs maximum
9	- Overflow: Use "More" tab if >5 destinations needed
10	- Selected state: Fill color indicates active tab
11	- Labels: 10pt SF text
12	- Background: Slightly translucent with background blur ("frosted glass")
13
14	Behavior:
15	- Each tab remembers its navigation state
16	- Tapping active tab returns to root screen of that tab
17	- Tab bar hidden during modals and keyboard display
18
19	## Navigation Bar (Contextual Navigation)
20
21	- Back button: Top-left, allows return to previous screen
22	- Actions: Top-right, context-specific actions
23	- Title: Center (scrolled state) or left-aligned large title (unscrolled)
24
25	Scroll Behavior:
26	- Large title collapses to compact centered title on scroll
27	- Search bar can move or hide on scroll
28	- Smooth animated transitions between states
29
30	## Navigating Back
31
32	\| Method \| Context \|
33	\|--------\|---------\|
34	\| "Back" button (top-left) \| Standard navigation \|
35	\| Swipe right from left edge \| Standard navigation \|
36	\| "Cancel" / "Done" button \| Modal views \|
37	\| Swipe down on content \| Modals, fullscreen media \|
38
39	## Modal Sheets
40
41	Use modals for focused tasks that shouldn't interrupt context completely.
42
43	- Slides up from bottom
44	- Previous screen visible (recessed) in background
45	- Dismiss via: close button, swipe down, or completing task
46
47	---
48
49	## Search UI Patterns
50
51	### Search Bar Placement
52
53	\| Context \| Placement \|
54	\|---------\|-----------\|
55	\| Primary search (core feature) \| Navigation bar, persistent \|
56	\| Secondary search \| Below nav, hidden on scroll \|
57	\| List filtering \| Above list, inline \|
58
59	### Search Behavior
60
61	States:
62	1. Inactive: Placeholder text, magnifying glass icon
63	2. Active/Focused: Keyboard appears, cancel button shows
64	3. Typing: Results update (instant or debounced)
65	4. Results: Displayed in list below
66
67	SwiftUI implementation:
68	```swift
69	.searchable(
70	text: $searchText,
71	placement: .navigationBarDrawer(displayMode: .always),
72	prompt: "Search items"
73	)
74	```
75
76	### Search Suggestions
77
78	- Recent searches
79	- Trending/popular searches
80	- Autocomplete suggestions
81	- Scoped suggestions (filter by category)
82
83	```swift
84	.searchable(text: $searchText) {
85	ForEach(suggestions) { suggestion in
86	Text(suggestion.name)
87	.searchCompletion(suggestion.name)
88	}
89	}
90	```
91
92	---
93
94	## Split View Navigation (iPad)
95
96	### Two-Column Layout
97
98	```
99	┌──────────────────┬────────────────────────────────┐
100	│ │ │
101	│ Primary List │ Detail View │
102	│ (Sidebar) │ │
103	│ │ │
104	│ Item 1 │ Selected item details │
105	│ Item 2 ← │ │
106	│ Item 3 │ │
107	│ │ │
108	└──────────────────┴────────────────────────────────┘
109	```
110
111	Behavior:
112	- Primary column: 320pt default width
113	- Detail column: Fills remaining space
114	- Collapse to single column on compact width
115
116	### Three-Column Layout
117
118	```
119	┌────────────┬────────────┬──────────────────────────┐
120	│ Sidebar │ Content │ Detail │
121	│ │ │ │
122	│ Section 1 │ Item A │ Item details here │
123	│ Section 2 │ Item B ← │ │
124	│ Section 3 │ Item C │ │
125	└────────────┴────────────┴──────────────────────────┘
126	```
127
128	SwiftUI:
129	```swift
130	NavigationSplitView {
131	Sidebar()
132	} content: {
133	ContentList()
134	} detail: {
135	DetailView()
136	}
137	```
138
139	### Responsive Behavior
140
141	\| Width \| Behavior \|
142	\|-------\|----------\|
143	\| Compact (iPhone) \| Stack navigation \|
144	\| Regular (iPad portrait) \| Two-column or overlay \|
145	\| Regular (iPad landscape) \| Three-column available \|
146
147	Best practices:
148	- Show placeholder in detail when nothing selected
149	- Remember selection across rotation
150	- Support column resizing (where appropriate)
151