Design system — Top navigation

Specimen

Bengaluru

The real bar, rendered here rather than mocked — so this page cannot drift from what ships. The readout narrows from left to right: where, what it is like there, then when. At this width the links sit beside the name and the readouts are pushed to the far edge; below 768px the links drop to a second line, and below 520px the city name goes and only the figures that change remain.

Biswarup Mondal

Bengaluru

Hover or focus the city. It opens with how far the reader is and roughly how long that is by air, then the coordinates in degrees, minutes and seconds. The distance lookup fires on that first hover and never on page load, so a reader who does not point at the city causes no request at all. The panel opens leftwards from the word and is laid out even while hidden, so it never moves the bar.

clearnightcloudfogdrizzlerainsnowstorm

The seven conditions the WMO code table is collapsed into, plus the night form of a clear sky. Drawn from circles and strokes so they survive at 12px, where an illustrated icon would not.

Props

Prop	Type	Note
label	`string`	Accessible name for the link group. Defaults to "Primary" — only this page passes it.

Every primitive also forwards the native props of the element it renders, so aria-*, id and event handlers work without being listed here.

Use it for

Mounted exactly once, in root.tsx, so every route gets the same bar.
The dotted underline on the city means inspectable, not navigable. It is the only underline left in the bar, which is what lets it carry that meaning on its own.
The page you are on is marked by the same travelling indicator the Tabs component uses — one <Indicator>, shared. It is a drawn element rather than text-decoration because the roughening filter may never touch text, so an underline could only ever be crisp.
Reading order is one phrase then one aside: place and local time share a comma because they answer the same question, and the sky follows after a wider gap because it is a separate fact.
Editing what it says: the name, city, coordinates, timezone and contacts are OWNER in lib/site.ts, and the links are PRIMARY_NAV in lib/nav.ts. Neither is in the component.

Do not use it for

Making it sticky. The Ruler owns the top edge, and a second pinned bar takes a fifth of a phone screen before any content appears.
Rendering the clock or the temperature on the server. Every content route is prerendered, so both would be frozen at build time.
Moving the visitor lookup to page load. It is the only third-party request on the site, and tying it to a deliberate gesture is what keeps it defensible.
A second instance on a page — two banner landmarks is worse than none.