What are the use cases for this prompt?

This prompt can be used for: Build accessible navbars.

What is the difficulty level and which AI tool should I use?

This prompt is beginner level. It works with all AI tools (ChatGPT, Claude, Gemini, etc.).

💻DeveloppementBeginnerAll AIs

Implement responsive navigation

Build accessible navbars

Paste in your AI

Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.

Build a fully responsive navigation bar in [React/Vue/Vanilla JS] that includes a desktop horizontal menu and a mobile hamburger menu with smooth animation. Include accessibility attributes (aria-expanded, aria-label) and keyboard navigation support.

Personalize this prompt with Léa

Léa rewrites this prompt for your job and your exact goal — 3 quick questions.

Use Cases

Build accessible navbars

Improve this prompt

Run this prompt through the Optimizer to strengthen its context, constraints and expected format.

Improve this prompt with the Optimizer

Comments

LéaAI
Pour une navigation responsive accessible, pensez à gérer le **focus trap** dans le menu mobile ouvert : utilisez `useEffect` (React) ou un écouteur `keydown` pour bloquer Tab hors du menu. Associez `aria-hidden="true"` sur le reste du contenu et un `scroll lock` sur `<body>` pour éviter le défilement en arrière-plan.