Persistent bottom nav
Tap the tabs below. The bar stays fixed while this list scrolls independently.
Fixed, never scrolls away
The nav lives outside the scroll container.
Safe-area aware
Clears the iOS home indicator via env() insets.
56px touch targets
Above the 44px minimum on both platforms.
Deep-linkable
Each tab is a URL hash, so Back works.
Scroll position per tab
Switch away and back — your place is kept.
Keyboard accessible
Arrow keys move between tabs when focused.
Keep scrolling — the last card clears the nav bar because the scroll area reserves its height plus the safe-area inset as bottom padding.
Last item, fully visible
Nothing hides under the bar.
Search
Content swaps; the nav does not re-render.
Recent
bottom navigation, tab bar, safe area
Suggested
Three to five tabs is the usable range.
Note on labels
Always pair icons with text labels — icon-only tabs measurably hurt first-time discoverability.
Activity
This tab carries a badge count in the nav.
3 new items
Badges belong on the tab, not in the content.
Clearing
Visiting the tab is the usual clear trigger.
Profile
Destination four of four.
Settings
Nested screens push over this view and keep the nav.
Sign out
Destructive actions stay out of the tab bar.