SectionNav
A right-hand index of the headings on the current page, tracking where you are.
Harbour rebrand
Identity, site and launch kit for the harbour trust. Due 24 Oct.
Tideline mobile
Offline tasks and a quiet inbox for the crew. Due 7 Nov.
Crew interviews
Twelve calls, one clear pattern. Due 17 Oct.
Rota export
Shifts out to payroll without the spreadsheet. Due 10 Oct.
Depot signage
Wayfinding for the three northern depots. Due 21 Nov.
Aisha Bello
Ferry deckhand, interviewed 6 Oct.
Ben Okafor
Pilot boat skipper, interviewed 6 Oct.
Carys Hughes
Harbour office, interviewed 8 Oct.
Dev Patel
Marine engineer, interviewed 8 Oct.
Erin Walsh
Ferry deckhand, interviewed 9 Oct.
Fatima Khan
Dispatcher, interviewed 13 Oct.
Gareth Pryce
Crane operator, interviewed 13 Oct.
Hana Sato
Ferry crew, interviewed 15 Oct.
Ivan Petrov
Tug crew, interviewed 15 Oct.
Kwame Mensah
Dock supervisor, interviewed 20 Oct.
Niamh Byrne
Ferry crew, booked, 21 oct.
Tomas Larsen
Night watch, booked, 21 oct.
Summary
Identity, site and launch kit.
Tasks
Four open, two done.
Files
Five files, 260 MB.
In context
Summary
Identity, site and launch kit.
Tasks
Four open, two done.
Files
Five files, 260 MB.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
sections | SectionNavItem[] | Yes | — |
searchPlaceholder | string | undefined | No | Filter sections… |
className | string | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Behaviour
- The search box only appears once the list passes 12 sections.
- The top and bottom edges fade when the rail overflows (scroll mist).
- The rail scrolls to keep the active section in view; a manual scroll of the rail wins for 5 seconds.
- Its height is measured, so it never grows past its slice of the viewport.
- A small pointer on the right edge marks which side an out-of-view active section sits.
Accessibility
A real <nav aria-label="Section navigation"> with plain <a href="#..."> links. The beacon pointer is aria-hidden; data-rebar-active marks the active link.
data-rebar-* attributes
data-rebar-component="section-nav"; data-rebar-part is "search", "scroll", "list", "item", "empty", "mist-top"/"mist-bottom" or "beacon-pointer-top"/"beacon-pointer-bottom".
Migrating to Ant Design
AntD's Anchor covers the base tracking; the mist, beacon and pointer would have to be rebuilt by hand.