Bart Veneman

Creator of Project Wallace, analytics for CSS. <noscript>-fanboy. Serverless clearfix engineer. I can lift node_modules twice my own weight.

Highlight the currently active navigation item

Want to style the current active navigation item?

Use

[aria-current="page"] { // your styles }

instead of setting an active className, so screen reader users will also recognize this as the current active page.

More info: https://t.co/OJxjnU9uqa

— Michael Scharnagl (@justmarkup) March 24, 2020

The mentioned article lists a whole bunch more values that can be used as aria-current, like step or date.

[aria-current="page"] {
// your styles
}

Tags