Building responsive navigation without a framework

Responsive navigation should begin as a clear list of links in the document. CSS and a small behaviour layer can change its presentation without replacing navigation with an inaccessible custom widget.

Write the navigation landmark

Use a labelled nav element containing ordinary links in a logical order. Identify the current page without removing its text and keep the list usable when styles or script are unavailable.

Choose a narrow-screen baseline

Allow the list to appear in document flow or link to it from a skip-style control. Avoid hiding navigation by default in CSS when JavaScript is required to reveal it.

Enhance with a real button

Insert or activate a button only when the collapse behaviour is available. Update its expanded state and the controlled region, and return focus predictably if the menu closes.

Use media queries for layout

At sufficient width, show the full navigation and neutralise collapsed-state attributes. Test the transition while the menu is open so resizing does not leave links hidden or an obsolete control visible.

Exercise keyboard and touch

Verify focus visibility, Escape policy, zoom, long labels and link activation on touch devices. Do not trap focus in a simple site menu or require hover to reveal essential sections.