# NavLink

> An inline text link for site navigation, colored through a semantic color role and underlined to read as a link among surrounding prose.

```ts
import { NavLink } from "@sdxc/ui";
```

Renders a native `<a>`, colored via `data-color` and underlined with a
translucent decoration that solidifies on hover. Setting `aria-current`
server-side renders the current-page treatment; the focus-visible ring always reads in the primary color.

## Examples

```tsx
<NavLink href="/dashboard" color="brand">{t("nav.dashboard")}</NavLink>
```

```tsx
<NavLink href="/settings" aria-current={pathname === "/settings" ? "page" : undefined}>{t("nav.settings")}</NavLink>
```

```tsx
<NavLink href="/settings" hasBackground mix={css({ paddingInline: "0.75rem", paddingBlock: "0.5rem" })}>{t("nav.settings")}</NavLink>
```

## Props

Takes no props of its own.

## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role, each mapped to its matching `--ui-*` variables. |