All components

Accessible responsive header

An essential but complete header: brand, navigation, active state, a mobile menu driven by aria-expanded, Escape to close and visible focus. Simple to copy, yet already ready for a real page.

Code in the Snippet Library All components

Navigation demo

The mobile menu updates the ARIA state, closes on Escape and keeps the current link clear.

ARIA Responsive Keyboard

Workspace

Content area

A clean layout for product pages, tools or lightweight dashboards.

Active link Escape close Focus ring

Component notes

When to use it

For static sites, lightweight dashboards, guides or templates that need clear navigation without a framework.

What it solves

It handles opening, closing, the current state and keyboard interaction without relying on visual classes alone.

How to adapt it

Change the logo, links and breakpoint. The semantic structure stays the same and the CSS stays separate from the behaviour.

How to build a responsive, accessible header in plain HTML and JS

The navigation bar, or header, is the single most important element for orienting people inside a website. Designing a navigation menu that is responsive on mobile devices and at the same time fully usable with a keyboard or assistive technology requires specific accessibility patterns. Many common mobile menus make the mistake of hiding links visually without removing them from the tab order, forcing keyboard users to navigate through invisible elements.

This component solves that structural problem by combining CSS classes for positioning with JavaScript for controlling the accessibility attributes. The mobile menu trigger (the hamburger icon) carries the aria-expanded attribute (set to true or false depending on state) and references the navigation menu's ID through aria-controls. When the menu is closed on mobile it is set to display: none or taken out of the flow via visibility, making sure it can't receive focus by mistake.

To improve the experience further, keyboard event handling is built in: pressing Escape automatically closes an open menu and returns focus to the button that opened it. The link matching the current page is marked with aria-current="page", giving a clear semantic signal of where the user is, both visually (through dedicated stylesheets) and to screen readers.

Quick FAQ about the accessible header

What is the aria-expanded attribute for in a mobile menu?

It tells assistive technologies (screen readers, for example) whether the submenu or mobile navigation it controls is open or closed. JavaScript flips it dynamically from false to true when the menu opens.

Why should the menu close on the Escape key?

Closing with Escape is a usability and accessibility standard for pop-up components (dropdowns, modals, menus). It lets keyboard-only users get out of a menu quickly without having to tab manually through every link.

How is the active link indicated, visually and semantically?

The active link uses the HTML5 aria-current="page" attribute. Screen readers recognize it as marking the current page, and CSS uses it as a specific selector (for example [aria-current="page"]) to apply distinctive styling such as a different color or an underline.