Navigation

Navbar

How the Navbar works with a keyboard and assistive tech.

Guidance#

The bar is a <header> containing a <nav> with an aria-label such as "Main". The current link has aria-current="page".

The menu button is a <button> with aria-expanded, aria-controls pointing to the panel, and the label Open menu or Close menu.

Escape closes the menu and returns focus to the button.

A skip link before the bar lets keyboard users jump to the main content.