CSS Styling Navigation

CSS can transform semantic HTML navigation into horizontal menus, vertical menus, navigation bars, and other visually organized groups of links.

Navigation commonly uses a <nav> element containing a list of links. HTML provides the structure and destinations, while CSS controls the layout, spacing, colors, backgrounds, and interactive states.

A navigation menu can use the HTML <nav> element with an unordered list containing links.

<nav aria-label="Main navigation">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="tutorials.html">Tutorials</a></li>
    <li><a href="reference.html">Reference</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

The list groups the related navigation links, while the <nav> element identifies the section as navigation.

An accessible name such as aria-label="Main navigation" can help distinguish this navigation region when a page contains more than one navigation landmark.

Removing List Styles

Navigation menus commonly remove the default list marker, margin, and padding from the list.

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

The HTML remains a list even though its default visual markers are removed with CSS.

Flexbox provides a straightforward way to arrange navigation items horizontally.

nav ul {
  display: flex;
  gap: 4px;
}

The display: flex declaration places the list items along the main axis, which is horizontal by default. The gap property adds consistent space between them.

Flexbox can also control alignment, wrapping, and the distribution of available space.

Navigation links can be displayed as blocks so padding creates a larger interactive area around their text.

nav a {
  display: block;
  padding: 12px 16px;
  color: white;
  background-color: #0088cc;
  text-decoration: none;
}

The padding becomes part of the clickable link area, making the navigation easier to select than styling only the text itself.

If the default underline is removed, other styling should continue to make the navigation links clearly identifiable as interactive controls.

The :hover pseudo-class can provide visual feedback when a pointing device is positioned over a navigation link.

nav a:hover {
  background-color: #006699;
}

Hover styling can help pointer users identify the link they are about to select, but navigation should not depend on hover for access to essential information.

Navigation links must also provide a visible indication when they receive keyboard focus.

nav a:focus-visible {
  outline: 3px solid #003d5c;
  outline-offset: 2px;
}

The :focus-visible pseudo-class allows a clear focus indicator to appear when the browser determines that a visible focus treatment is appropriate, such as during keyboard navigation.

Avoid removing the browser's focus outline unless another clearly visible focus indicator is provided.

Current Page Link

The navigation link for the current page can have a different appearance so users can identify their location within the site.

nav a[aria-current="page"] {
  background-color: #004d73;
  font-weight: bold;
}

The HTML aria-current="page" attribute identifies the link representing the current page, while CSS provides its visual treatment.

<a href="tutorials.html" aria-current="page">Tutorials</a>

Using the attribute for both meaning and styling avoids relying on a visual class alone to communicate the current-page state.

A navigation list can remain vertical by allowing its items to follow normal block layout.

.vertical-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.vertical-nav a {
  display: block;
  padding: 10px 14px;
}

Vertical navigation is commonly used for sidebars, documentation menus, account menus, and groups containing many links.

Because each link is displayed as a block, it can fill the available width of the navigation container.

A horizontal navigation menu can change its layout when the available viewport width becomes smaller.

@media (max-width: 600px) {
  nav ul {
    flex-direction: column;
  }
}

In this example, the navigation items are horizontal above the breakpoint and become vertical at 600 pixels or narrower.

More advanced responsive navigation may use menu buttons, expandable sections, or other interface patterns. Those patterns can require HTML and JavaScript in addition to CSS so their expanded and collapsed states remain operable and accessible.

Navigation should remain understandable and usable with a keyboard, pointing device, touch input, and assistive technology. CSS should enhance the navigation without removing the underlying meaning or interaction provided by HTML.

Keep keyboard focus clearly visible, provide sufficient color contrast, and make link areas large enough to select comfortably. Do not rely only on color to communicate important states when another visual cue can help identify them.

Use links for navigation to another page or location. Use buttons for actions that change the current interface, such as opening and closing a responsive navigation menu.

When a page contains multiple navigation regions, accessible names can help users distinguish their purposes.

The following example creates a horizontal navigation bar with spacing, hover and focus states, and a current-page indicator. Open the example in the editor and change the colors, padding, gap, breakpoint, or Flexbox direction to see how each property affects the navigation.

.main-nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 4px;
  list-style: none;
}
.main-nav a {
  display: block;
  padding: 12px 16px;
  color: white;
  background-color: #0088cc;
  text-decoration: none;
}
.main-nav a:hover {
  background-color: #006699;
}
.main-nav a[aria-current="page"] {
  background-color: #004d73;
  font-weight: bold;
}

Play in Editor