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
Answer 3 questions and Léa tailors the prompt to your situation.
Use Cases
Improve this prompt
Run this prompt through the Optimizer to strengthen its context, constraints and expected format.
Improve this prompt with the OptimizerComments
- 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.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Go further
Similar Prompts
Optimize React Application Performance
Optimize your React application to achieve excellent Core Web Vitals metrics through advanced memoization and code splitting techniques.
Blue/Green Deployment Strategy
Zero-downtime deployment
Design a feature flag system
Build feature flag infrastructure
Documenting existing code
Quickly documenting existing undocumented code