Field Note / Interaction patterns
Persistent Navigation Patterns for Mobile Websites
Persistent navigation keeps location or key destinations available while the content changes. On a mobile business website, it should be compact, readable, safe-area aware, and secondary to the current message.
- 01Progress and navigation are related but not identical.
- 02The control must remain legible across light and dark moments.
- 03Persistent UI should preserve more canvas than it consumes.
01 / Navigation vocabulary
Choose the smallest control that preserves confidence.
Story progress bars
Useful for short, ordered sequences. They communicate length and current position, but each segment needs a real accessible target if it is clickable.
Bottom dock
Useful for a few high-value destinations or actions. It is thumb-reachable but competes with browser chrome and safe areas.
Side rail
Useful when chapter switching matters and labels can remain concise. On narrow phones, a full labeled rail can make the content feel compressed.
Chapter menu
Useful as an explicit overview. A menu can complement gestures without remaining visually dominant.
02 / State communication
Show location, destination, and return.
A progress indicator answers “How far am I?” Navigation answers “Where can I go?” A contextual CTA answers “What can I do here?” Combining all three into one ambiguous control creates uncertainty.
Labels should describe destinations. Current state should be programmatically identified. When a visitor enters a horizontal detail sequence, returning left should restore the same parent chapter and vertical position.
Every deeper path needs a visible way back to the exact context that opened it.
03 / Mobile constraints
Respect the edges of the device.
Persistent controls need enough contrast across changing backgrounds. A restrained translucent surface can unify the control without becoming a heavy app bar. Safe-area insets protect controls around home indicators and display cutouts.
- Keep essential content clear of persistent UI.
- Use stable control dimensions to prevent layout movement.
- Maintain target size and spacing.
- Do not rely on color alone for current state.
- Ensure zoomed text does not disappear beneath fixed bars.
The interface should feel available, not demanding.
Quick reference
Questions, answers, and next reading.
Are story progress bars enough navigation for a website?
Not always. They communicate sequence well, but a labeled menu or descriptive controls may still be needed for people who want to skip directly to a destination.
Should mobile website navigation stay at the bottom?
Bottom placement is thumb-friendly but must account for safe areas, browser controls, and content overlap. Top, side, and contextual patterns can be better for some systems.
How transparent should persistent navigation be?
Transparent enough to preserve the visual scene, but opaque enough to keep controls and text readable over every background state.