NavLink

let pathname = useCurrentPath();

let entries = [
	{ href: "/settings/profile", label: "Profile" },
	{ href: "/settings/billing", label: "Billing" },
	{ href: "/settings/members", label: "Members" },
	{ href: "/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>