Build a responsive navigation menu

Loading problem workspace…

Build a responsive navigation menu · UIHero

Build a responsive navigation menu

Implement one semantic navigation that expands inline on desktop and toggles accessibly on mobile.

MediumHTML/CSS Interaction

45 min0% acceptance

Description

Build a responsive site header. Desktop links remain visible in a horizontal layout, mobile uses a correctly labelled toggle with synchronized expanded state, Escape closes and restores focus, and every link remains keyboard reachable without overflow.

Requirements

Navigation landmarks works deterministically for the documented normal, boundary, and repeated-use scenarios.
Toggle semantics works deterministically for the documented normal, boundary, and repeated-use scenarios.
Mobile open close works deterministically for the documented normal, boundary, and repeated-use scenarios.
Escape restores focus works deterministically for the documented normal, boundary, and repeated-use scenarios.
Link keyboard access works deterministically for the documented normal, boundary, and repeated-use scenarios.
Desktop layout works deterministically for the documented normal, boundary, and repeated-use scenarios.
Content remains inside the viewport without unintended horizontal scrolling at every reference width.

Mobile dismissal

Input

Open the mobile menu and press Escape

Expected output

The links collapse and keyboard focus returns to Menu

Explanation

Desktop mode continues to show the same links without requiring the toggle.

Constraints

Use a nav landmark and a list of links
The mobile toggle must be a native button
Keep all links in the DOM in both layouts

Hints

Hint 1

Let one expanded state drive both visibility and aria-expanded.

Hint 2

Use a media query to establish desktop visibility rather than duplicating navigation markup.

Hint 3

When Escape closes the mobile menu, explicitly return focus to its toggle.

HTMLresponsive navigationaccessibility

Loading problem workspace…