A responsive navigation

Start with visible links, then add a small-screen toggle as progressive enhancement. Navigation remains available if the script cannot run.

Open the working example → · Download complete project (ZIP)

Build it step by step

1. Open the page wide and follow each section link.
2. Narrow the browser below 600px. Use the menu button.
3. Press Tab through the links and test Escape.
4. Disable JavaScript and reload: the links should remain visible.

How it works

The button’s aria-expanded value follows the visible state. aria-controls points to the navigation id. At wide sizes the links stay visible regardless of the small-screen toggle state.

Read the JavaScript

const button=document.querySelector('#menu');
const links=document.querySelector('#links');
button.hidden=false;
document.documentElement.classList.add('enhanced');
function close(){links.classList.remove('open');button.setAttribute('aria-expanded','false');}
button.addEventListener('click',()=>{const open=links.classList.toggle('open');button.setAttribute('aria-expanded',String(open));});
links.addEventListener('click',event=>{if(event.target.closest('a'))close();});
document.addEventListener('keydown',event=>{if(event.key==='Escape'&&links.classList.contains('open')){close();button.focus();}});

A small mistake to watch for

Check your work

Try a narrow window, enlarged text and keyboard navigation. Read the complete HTML, CSS and any JavaScript in the download. These examples use fictional sample content and no external libraries.

All practice projects