@orangecheck/ui / OcPrimaryNavLink
Interface: OcPrimaryNavLink
Defined in: primary-nav.tsx:39
<OcPrimaryNav> — the centered link row in every family site's
<LayoutHeader>. Replaces the per-site bespoke <nav> blocks.
Design goals:
-
Visible at every viewport width — no
hidden md:flexcutoff. Three short links (dashboard · docs · spec) fit on a 320px phone in compact mono uppercase. Hamburger drawer stays reserved for tertiary content (about / contact / etc.). -
Active-link affordance is identical to the prior bespoke pattern (primary-coloured text + 1px underline accent), so visitors who learned the old nav keep their muscle memory.
-
Horizontal-scroll fallback. If a site adds a fourth link or runs a very long label, the row scrolls instead of wrapping or overflowing —
overflow-x-auto+whitespace-nowrap+ a thin gradient mask viamask-imageso the truncation reads as intentional.
Usage:
<OcPrimaryNav activePath={router.pathname} links={[ { href: '/dashboard', label: 'dashboard' }, { href: 'https://docs.ochk.io/attest', label: 'docs', external: true }, { href: 'https://github.com/orangecheck/oc-attest-protocol/blob/main/SPEC.md', label: 'spec', external: true }, ]} />
Properties
| Property | Type | Description | Defined in |
|---|---|---|---|
<a id="property-external"></a> external? | boolean | When true, opens in a new tab and skips the isActive check. | primary-nav.tsx:45 |
<a id="property-href"></a> href | string | Same-origin path or absolute URL. | primary-nav.tsx:41 |
<a id="property-label"></a> label | string | Visible label · lowercase preferred (the chip styling applies tracking + uppercase). | primary-nav.tsx:43 |
<a id="property-matchexact"></a> matchExact? | boolean | Optional override for the active-match. By default the link is active when activePath === href or activePath.startsWith(href + '/'). | primary-nav.tsx:48 |