Components & UI

CSS Navigation Bars

Horizontal and vertical menus.

1Horizontal Nav

Turn a list into a menu bar using Flexbox.

Example Code

css

ul.nav {
  list-style: none;
  display: flex;
  gap: 20px;
  background: #333;
  padding: 10px;
}
ul.nav a {
  color: white;
  text-decoration: none;
}

2Understand it in a real interface

A navigation bar should prioritize a small set of useful destinations. Spacing, a visible current-page indicator, and clear labels are more important than decorative effects. A visual mobile menu also needs opening, closing, focus, and state behavior that CSS alone may not provide.

3Try it yourself

Build a short navigation list using actual links. Add an active-page treatment and inspect it without color alone. Reduce the available width and plan a usable wrapped or expandable layout. Test the destinations and keyboard order before adding a sticky position.

Finished reading?

Mark this topic as complete to track progress.

CSS Tables

Next Topic

CSS Dropdowns