Fresh logo

Styling active links

Fresh automatically enhances the accessibility of <a> elements by adding the aria-current attribute when rendering links that match the current URL. This attribute is recognized by assistive technologies and clearly indicates the current page within a set of pages.

  • aria-current=“page” - Added to links with an exact path match, enhancing accessibility by indicating the current page to assistive technologies.

As we aim to improve accessibility, we encourage the use of aria-current for styling current links where applicable.

Styling with CSS

The aria-current attribute is easily styled with CSS using attribute selectors, providing a native way to visually differentiate the active link.

/* Give links pointing to the current page a green color */
a[aria-current='page'] {
  color: green;

/* Color all ancestor links of the current page */
a[aria-current='true'] {
  color: peachpuff;

Tailwind / Twind

In Tailwind or similar CSS frameworks, you can apply styles to elements with the aria-current attribute by using bracket notation in your class definitions.

function Menu() {
  return (
    <a href="/foo" class="[aria-current]:text-green-600">
      link to some page

Twind Plugin

The original twind plugin (import twindPlugin from "$fresh/plugins/twind.ts";) supports the above style:


TwindV1 Plugin

The new twind plugin (import twindPlugin from "$fresh/plugins/twindv1.ts";) requires a slightly different syntax (note the position of the left bracket):