Prompt · Intermediate

Prompt for accessible site navigation

Generate ordinary site navigation with real links, a robust small-screen toggle, visible focus, and predictable keyboard behavior.

Author: Editorial team
Reviewer: Publication review pending
Review tier: 180-day

Version 1.0.0 · components

Variables

[SITE_NAME] · Site name: The visible site identity. Required.
[NAV_ITEMS] · Navigation items: Real labels and destinations. Required.

Expected output

Html
Css
Minimal Javascript
Keyboard Contract
Tests

Common failures

Menu roles on site links
Focusable hidden items
Missing expanded state

Compatible modes: Chat, Agent, Ide Assistant

Build responsive site navigation for [SITE_NAME] using these real links:
[NAV_ITEMS].

Use a nav region with an accessible name and ordinary anchors. Keep desktop
navigation useful without JavaScript. If a narrow-screen disclosure requires
script, use a real button, synchronize its accessible name and expanded state,
hide closed links from focus, support predictable focus return, and document
Escape behavior.

Do not apply application menu roles to ordinary site links. Do not use positive
tabindex, click-only generic elements, hover-only submenus, or focus styles
that disappear.

Return HTML, mobile-first CSS, the minimum JavaScript, a state table, and
keyboard, screen-reader, zoom, reduced-motion, and no-script test steps.

Complete prompt

Build responsive site navigation for [SITE_NAME] using these real links:
[NAV_ITEMS].

Use a nav region with an accessible name and ordinary anchors. Keep desktop
navigation useful without JavaScript. If a narrow-screen disclosure requires
script, use a real button, synchronize its accessible name and expanded state,
hide closed links from focus, support predictable focus return, and document
Escape behavior.

Do not apply application menu roles to ordinary site links. Do not use positive
tabindex, click-only generic elements, hover-only submenus, or focus styles
that disappear.

Return HTML, mobile-first CSS, the minimum JavaScript, a state table, and
keyboard, screen-reader, zoom, reduced-motion, and no-script test steps.

Verification checklist

Test all destinations as real links, tab in both directions, close the mobile state from every focus position, and confirm hidden links are unreachable.

Follow-up prompts

Ask for a state-by-state review without redesigning the component.