Nav link with active state

Workspace sub-nav: Inbox is current—pill fill and inset ring echo the accent without loud borders.

Widely Supported

typographynava11y

Quick implementation

.subnav a {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.subnav a[aria-current="page"] {
  color: var(--fg);
  background: color-mix(in oklch, var(--accent) 18%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 35%, var(--card-border));
}

Prompt this to your LLM

App sub-navigation and segmented controls.

You are styling a horizontal sub-navigation.

Goal: Pill-shaped links; active route uses aria-current="page" with filled background.

Constraints:
- Muted color for inactive; hover lifts to fg with subtle surface.
- Active state uses accent-tinted background + inset ring.

Return CSS for .subnav a.

Why this matters in 2026

aria-current is the standard hook for SPA routers and multi-page apps alike—style it, don’t duplicate with .is-active only.

The logic

Attribute selectors keep specificity low; one ruleset tracks server and client rendering.

Accessibility & performance

Expose the navigation landmark; ensure visible focus rings for keyboard users.