@orangecheck/design / OcPrimaryNavLink
Interface: OcPrimaryNavLink
Defined in: chrome/primary-nav.tsx:29
<OcPrimaryNav> — the centered link row in every family site's
<LayoutHeader>. Replaces the per-site bespoke <nav> blocks.
Desktop-only. The inline row shows at md+; below that it is hidden,
because on mobile the same links live in the account menu's ☰ drawer
(OcAccountMenu, rendered to the left of the identity chip) — one shared
mobile-nav pattern, no centered hamburger, no per-site fork.
Active item is text-primary; siblings are muted. Active affordance is
text-only (no underline / bottom stripe) — deliberately restrained.
Usage:
<OcPrimaryNav activePath={router.pathname} links={[ { href: '/dashboard', label: 'dashboard' }, { href: 'https://docs.ochk.io/attest', label: 'docs', 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. | chrome/primary-nav.tsx:35 |
<a id="property-href"></a> href | string | Same-origin path or absolute URL. | chrome/primary-nav.tsx:31 |
<a id="property-label"></a> label | string | Visible label · lowercase preferred (the chip styling applies tracking + uppercase). | chrome/primary-nav.tsx:33 |
<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 + '/'). | chrome/primary-nav.tsx:38 |