Navigation
Getting around the site uses one chrome set that reshapes per screen rather than several separate ones. The same dock is edge-to-edge on a phone, a floating pill on a tablet, and gone on desktop, where the top nav takes over.
One chrome set, three viewports
Navigation is shaped by the viewport more than any other part of the system. The frames below are the real home page rendered at each band's width, whatever device you are reading this on: the dock runs edge-to-edge on a phone, floats as a pill on a tablet, and gives way to the top nav links on desktop.
The frames below are the real pages rendered at real widths, scripts off — so they always show the light theme and no analytics run inside them.
Top bar
A sticky bar carrying the logo and the utility controls (language, theme, and blog search). It stands 64 pixels tall on desktop, 60 on tablet and 56 on a phone. On desktop it also holds the three section links; below 1280 those move to the dock.
Tab dock
The primary section navigation on phone and tablet: four tabs — Home, Blog, Work, Book a call. It is a single element with one breakpoint, not two components. The frames below are the real page cropped to the dock: edge-to-edge at 390 with the active tab in green text alone, a floating pill at 768 where the active tab gains a tinted fill. Four tabs is structural; a fifth would not fit the grid, which is why this design-system section lives in the footer.
Reading action bar
On a reading page the dock is replaced, not joined, by a contextual action bar: a progress ring with the current section opens the contents sheet, then share and back-to-top. This is the real ReadingBar component, shown mid-article. One bar at a time: browse chrome or read chrome, never both.
Docs navigation
This section's own navigation follows the blog post's anatomy rather than inventing its own: on a phone the top bar swaps the logo for a back chevron to the Design hub with a collapsing page title, the reading action bar replaces the dock and its ring button opens the contents as a bottom sheet, and on desktop the contents pin to the right as the article ToC, highlighting the section you are in. The breadcrumb names the group, and the hub page is the index.
Breadcrumb
A small mono-caps trail above a page title. It names places, never the page itself: the title below does that, so the trail ends one level up. Every segment is capped with an ellipsis, and long series names are shortened at the source (“React Native” becomes “RN”), so the trail cannot wrap.
<Breadcrumb label="…" items={[{ label, href }, …]} />It sits on articles (Blog, then the series), on tag and series pages, and on these docs. On phones it works alongside the top-bar chevron: the chevron takes you back, the trail tells you where you are.
Smaller chrome
Four smaller pieces complete the navigation set. A fixed 3-pixel green progress bar tops every article and docs page. A round back-to-top button floats in once a page is long enough. The blog feed pages with numbered links on desktop and a single load-more pill on phones. And the 404 page keeps the same voice: a large 404, one line, and outline buttons back to Home, Blog and Work.
When to use
Do
Don’t
Do
Don’t
Where it lives
Nav.astro (.nav), TabBar.astro, ReadingBar.astro and Footer.astro (.footer). The dock and reading bar above are those components rendered live; the frames show the top bar in place.