Header pattern mockups

Four approaches to the back-nav + title control bar for Slipstream owner views. Each shown at desktop and 390px mobile. Pattern has to scale from a flat list (level 1) to a post-edit screen (level 2) and theoretically deeper. Pick one to lock in — I'll implement across the plugin.

A · Separate button + title

Circular back button on the left, plain title next to it. Arrow is the only clickable thing; title is pure label of the current page.

Desktop — list view (level 1)

Health Services

New Service
test service
second test
Desktop — post edit (level 2)

test service

Post-edit content…
Mobile — list

Health Services

New
test service
second test
Mobile — post edit

test service

Post-edit content…
+ Clearest click target: the arrow. No ambiguity about what clicking the title does (nothing).
+ Scales trivially to any depth — the back arrow always just goes up one.
Doesn't tell you WHERE back is going. User relies on memory / context.

B · Pill back (parent in the pill) + current title

Pill contains arrow + the name of where "back" goes. Current page title sits after it as plain text. No ambiguity because the pill explicitly says where it goes.

Desktop — list view (level 1 — pill goes to Dashboard)
Dashboard

Health Services

New Service
test service
second test
Desktop — post edit (level 2 — pill goes to Services)
Health Services

test service

Post-edit content…
Mobile — list
Dashboard

Health Services

New
test service
second test
Mobile — post edit
Services

test service

Post-edit content…
+ Back destination is explicit — no memory load.
+ Scales — at deeper levels the pill simply shows the immediate parent.
Pill + title stacked feels verbose at the list level ("Dashboard" next to "Health Services" is a lot of text just to say "you're in Services").
On narrow mobile the pill + title compete for space.

C · iOS-style text back link

Classic iOS nav bar: chevron + parent name as a single link on the left, page title centred. Familiar pattern; lightweight.

Desktop — list view
Dashboard

Health Services

New Service
test service
second test
Desktop — post edit
Services

test service

Post-edit content…
Mobile — list
Dashboard

Health Services

test service
second test
Mobile — post edit
Services

test service

Post-edit content…
+ Universally recognised iOS pattern; no explanation needed.
+ Centered title reads as "the current page"; back link on left is clearly navigation.
Centering the title is fragile with variable-length names + variable right-side actions.
Text-only back link has a smaller click target than a chip/button.

D · Full breadcrumb chain

Every level is shown as a clickable crumb (except the current page). Scales to any depth. Most explicit about site hierarchy.

Desktop — list view
Dashboard Health Services
New Service
test service
second test
Desktop — post edit (level 2)
Dashboard Health Services test service
Post-edit content…
Mobile — list (chain stays)
Dashboard Health Services
test service
second test
Mobile — post edit (chain truncates to arrow + current)

test service

Breadcrumb chain collapses on mobile — arrow goes back one level, current title stays visible. Parent list would be too long to render inline at 390px.

+ Most explicit — always shows the full path. Powerful for deep hierarchies.
+ Every level is clickable for direct jumps.
Consumes horizontal space quickly; forces mobile truncation which loses the pattern's benefit.
Slipstream flows are mostly 1–2 levels deep — full chain might be overkill.

My read

Variant A (separate back + title) is the cleanest for Slipstream because most flows are 1 level deep — the extra metadata of B/D only earns its space in deeper hierarchies. It also matches iOS and WordPress conventions, so no ambiguity about clickability. The downside (back destination not named) is small: owners only back out of one place, and the arrow tooltip can carry the label.

If we want to handle deeper flows later (post edit is level 2), A still works — arrow goes up one level, title shows current page name. If we add a 3rd level, that's when I'd reach for D, but only then.