NavLink
A text link in a navigation bar — the landing nav's section links. Quiet ink that darkens on hover; the page or section you're on sits in full ink. A plain link, to a hash or a route.
Playground
import { NavLink } from "@/components/shared/nav-link";
<NavLink href="#how-it-works">
How it works
</NavLink>States
At rest it's ink at 60%; hover darkens it to ink over 150ms. Mark the one you're on with aria-current — "page" for a route, "location" for a section of this page — and it stays ink. Tab to one for the focus ring.
import { NavLink } from "@/components/shared/nav-link";
<NavLink href="#how-it-works">How it works</NavLink>
<NavLink href="#faq" aria-current="location">FAQs</NavLink>Sizes
sm 14px, the landing nav's size and the default; md 16px for a bar with more room.
In the landing nav
The section links sit in a list, 32px apart, on the page's centre line. They show from lg up; below that the nav keeps only the wordmark and its call to action.
import { NavLink } from "@/components/shared/nav-link";
<ul className="flex items-center gap-8">
{SECTIONS.map(({ id, label }) => (
<li key={id}>
<NavLink href={`#${id}`}>{label}</NavLink>
</li>
))}
</ul>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | — | A hash on this page (#faq) or a route (/pricing). |
| size | "sm" | "md" | "sm" | 14 or 16px text. |
| aria-current | "page" | "location" | … | — | Marks the link you're on: it stays ink, and assistive tech announces it. False or absent is at rest. |
| className | string | — | Layout only — margins, padding for a hit area. |
Everything else passes through to the <a> (target, onClick, …). For another element — Next's Link, say — use navLinkStyles({ size, current }).
Guidelines
- Navigation only. An action is a
Button; a call to action in the nav is aButtonLinkbeside the links. - Labels are short nouns in sentence case, matching the section they lead to: “How it works”, “FAQs”.
- At most one link is current at a time. Set it from the route, or from the section in view for hash links — never leave two in ink.
- Keep a list of links in a
<nav>with anaria-label, each link in an<li>.