NavLink
atomStyled navigation anchor with active, disabled, icon, and inverse states. The inverse prop uses a surface background with textPrimary for sidebar links on tinted chrome. Renders as an <a> by default but accepts a custom `as` prop for framework routers.
States
Default, active, and disabled nav links.
Vertical sidebar
Stacked nav links mimicking a sidebar.
Inverse sidebar
Inverse links for sidebar navigation on tinted chrome backgrounds.
Usage
Installation
API Reference
NavLink props — * required
| Prop | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | — | Link label text or content. |
href | string | — | URL the link points to. |
isActive | boolean | false | Applies the active visual style. |
icon | React.ReactNode | — | Optional icon rendered before the label. |
inverse | boolean | false | Uses surface background with textPrimary instead of accent for the active state. Active inverse links show border-default border, shadow-md elevation, and a 3px accent right border indicator. Ideal for sidebar navigation on tinted chrome. |
disabled | boolean | false | Prevents interaction and dims the link. |
onClick | () => void | — | Click handler. |
as | React.ElementType | "a" | Override rendered element — e.g. a Next.js Link. |