Responsive Navigation Bar

Published at 15 Jun 2026

Description
Explains what the challenge is about and what you need to build.

Responsive navigation is essential for modern websites. In this challenge, you will build a Responsive Navigation Bar that shows horizontal links on desktop and a hamburger menu on mobile.

Create a navbar with a toggle button that opens/closes a navigation drawer on small screens.

Requirements
Lists the specific elements, IDs, and behaviors your solution must include to pass the tests.

Toggle button with ID #navbar-toggle.
Drawer menu container with ID #navbar-menu.
Active opened drawer must add class .active.

Example Demo

User Flow

Step-by-step Flow Explanation:

User switches viewport to mobile.:
User clicks #navbar-toggle hamburger button.:
The drawer slides open/closes dynamically.:

Related UI Challenges

Component UI

Discussion (0)

Join the Discussion

index.html

style.css

script.js

Loading Monaco Workspace...

Live Preview Browser

Tests & Console Output

Click to expand

Test Assertion	Status	Details/Errors
Required DOM Elements exist (#navbar-toggle, #navbar-menu, .active)	Pending	Pending execution
Component layout compiles and renders successfully with custom CSS styles	Pending	Pending execution
Interactive JavaScript logic and event listeners are implemented	Pending	Pending execution