[ @sdxc/ui ]

NavLink

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

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

View code

let pathname = useCurrentPath();

let entries = [
	{ href: "/examples/settings/profile", label: "Profile" },
	{ href: "/examples/settings/billing", label: "Billing" },
	{ href: "/examples/settings/members", label: "Members" },
	{ href: "/examples/settings/webhooks", label: "Webhooks" },
];

<div mix={[hstack({ gap: 10, align: "start" })]}>
	<nav mix={[vstack({ gap: 2, align: "start" })]}>
		<Header>Underlined</Header>
		{entries.map((entry) => (
			<NavLink
				key={entry.href}
				href={entry.href}
				aria-current={pathname === entry.href ? "page" : undefined}
			>
				{entry.label}
			</NavLink>
		))}
	</nav>

	<nav mix={[vstack({ gap: 1, align: "stretch" })]}>
		<Header>Filled</Header>
		{entries.map((entry) => (
			<NavLink
				key={entry.href}
				href={entry.href}
				hasBackground
				aria-current={pathname === entry.href ? "page" : undefined}
				mix={[
					pi(3),
					pb(2),
					rounded("md"),
					text("sm"),
					when('&[aria-current="page"]', bg("brand.tint")),
				]}
			>
				{entry.label}
			</NavLink>
		))}
	</nav>
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui remix

import "@sdxc/ui/theme.css";

Usage

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

Current page

View code

<nav aria-label="Site" mix={[hstack({ gap: 4, align: "center" })]}>
	<NavLink href="/">Home</NavLink>
	<NavLink href="/docs">Guides</NavLink>
	<NavLink href="/api/ui" aria-current="page">
		Components
	</NavLink>
	<NavLink href="/showcase">Showcase</NavLink>
</nav>

With a background

Guides

View code

<NavLink href="/docs" hasBackground mix={[pi(3), pb(2), rounded("md"), bg("neutral.tint")]}>
	Guides
</NavLink>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Types

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