← Live page The main nav bar All tests
00

The brief

The live bar sets the five section links loose in the middle of the row, each in its own hit area, with the current one held in a faint pill. The pill is small against a lot of empty bar, so the row reads as five separate links rather than as one control. Every option below keeps the same five sections, the same wordmark and the same Donate button, and only changes how the links are grouped and how the current one is marked.

Each bar is shown twice — once on the dark ground the page opens on, once on the white it turns to at How we work — because the marker has to survive both. They are static here rather than sticky, so they can be compared without scrolling.

01

Segmented — the pill fills the track

The deck.gallery treatment. The links sit in their own capsule and the current one is a pill inside it with only a few pixels of margin all round, so the marker nearly fills the track's height. Reads as one control with a position in it rather than as five links, which is exactly what a section stepper is.

02

Segmented, solid marker

The same tight track as 01, but the marker is the page's own ink rather than a tint — full contrast, the way the Donate button is. The strongest statement of where you are, and it makes the bar's two solid shapes (marker and CTA) rhyme.

03

Rule under the current section

No pill at all: the links sit on the bar and the current one carries a short rule beneath it. The quietest option, and the one that adds no new shape to a page already built out of pills — but the marker is thin, and on a busy photograph behind the bar it is the first thing to get lost.

04

Track floats on its own

The wordmark and the Donate button stay at the page edges with no bar behind them, and only the section track gets a surface. Three objects on the page instead of one long bar — lighter over the hero, and the track can centre itself without having to balance the two ends.

05

Left-aligned, numbered

The links move over to sit beside the wordmark rather than floating in the middle, and each carries its section number. Turns the bar into a table of contents — it says how many sections there are and which one this is, which the centred version never does.

06

Progress track

The segmented track from 01 with the read-progress line folded into it: the marker's own capsule fills left to right as the section is read, so the bar reports position twice over — which section, and how far through. Costs nothing extra on the page since the progress line already exists at the foot.

07

As it was — loose links, faint pill

The live bar as it stood before this page: the five links spaced across the middle of the row with no track behind them, and the current one held in a 7% pill that is a little wider and a lot shorter than the gap around it. Kept here so the version being replaced is still on record and can be put back from one place.