How to build a Navbar

Build a practical Navbar component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Navbar demo
lesson.html
1
2
3
4
5
html5 linesWrap
Preview

Terminal

Success

Ready.

Run code to see output here.

CSS code

.lesson-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
}

React version

function LessonList() {
  const topics = ["Navbar", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}