Styling Navigation

CSS Styling Navigation

Website navigation is commonly built with semantic HTML links organized inside a navigation element. CSS can transform this basic structure into horizontal or vertical navigation by controlling list markers, spacing, colors, backgrounds, interaction states, and responsive layout.

Navigation Structure

A common navigation structure uses the HTML <nav> element containing an unordered list of links. HTML provides the structure and meaning, while CSS controls how the navigation looks.

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/index.html">Home</a></li>
    <li><a href="/products.html">Products</a></li>
    <li><a href="/services.html">Services</a></li>
    <li><a href="/contact.html">Contact</a></li>
  </ul>
</nav>

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

Removing List Styles

Navigation lists usually do not need the browser's default bullets, margins, or indentation. These styles can be removed with CSS.

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

The HTML remains a list even though its visual list markers have been removed.

Horizontal Navigation

Flexbox provides a simple way to arrange navigation list items horizontally.

nav ul {
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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.

Styling Navigation Links

Navigation links can be displayed as blocks so padding creates a larger clickable area around each link label.

nav a {
  display: block;
  padding: 10px 15px;
  color: #ffffff;
  background-color: #0088cc;
  text-decoration: none;
}

Hover State

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 effects can help show that a link is interactive, but navigation should remain understandable and usable without relying on hover alone.

Focus State

A visible focus style helps keyboard users identify which navigation link currently has focus.

nav a:focus {
  outline: 2px solid #333333;
  outline-offset: 2px;
}

Do not remove the browser's focus indicator unless another clearly visible focus style replaces it.

Current Page

The link for the current page can use a class to give visitors a visual indication of their location within the website.

nav a.current {
  background-color: #005580;
  font-weight: bold;
}

<a href="/products.html" class="current" aria-current="page">Products</a>

The CSS class controls the appearance, while aria-current="page" identifies the link as representing the current page for assistive technologies.

Vertical Navigation

A navigation list does not need Flexbox when its links should remain stacked vertically. Block-level links can fill the available width of the navigation area.

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

.vertical-nav a {
  display: block;
  padding: 10px 15px;
}

Vertical navigation is useful for sidebars, smaller navigation groups, and layouts where links should appear one above another.

Responsive Navigation

A media query can change horizontal navigation into a vertical layout when the available screen width becomes too narrow.

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

This simple approach keeps the same HTML navigation structure while changing its presentation for smaller screens. More complex websites may use expandable navigation menus, which generally require additional HTML, CSS, and scripting to manage their behavior and accessibility.

Try Styling Navigation

Edit the CSS in the example to change the navigation colors, spacing, link padding, and interaction states. Drag the divider between the code and result panes to change the preview width and see the navigation switch between horizontal and vertical layouts.

Summary

CSS can transform semantic HTML navigation into horizontal or vertical layouts by removing default list styles, arranging list items with Flexbox, and styling the links with colors, backgrounds, padding, and interaction states. Media queries can adapt the same navigation structure to smaller screens, while visible focus styles and aria-current help make navigation easier to use and understand.