Design Pattern

Navigation Bar

A navigation bar is a UI that consolidates the main ways to move around a site. It organizes the logo, links, active state, and supporting actions while preserving keyboard operation and awareness of the current location.

Difficulty: Intermediate Category: Navigation

When to use / not use

Use it when

  • When you want to always expose the main site pages
  • When you want the logo, main links, and a CTA together in the header
  • When a desktop-centric information architecture makes a horizontal top nav natural

Don't use it when

  • When there are too many links to fit in one horizontal row
  • When you need the primary nav for a hierarchical admin screen → side navigation fits better
  • When the main goal is switching in-page content → use tabs

Anatomy

1 Navigation container (nav element)
2 Logo / brand name
3 Navigation links (ul/li/a)
4 Active state indicator
5 Action area (CTA buttons, etc.)
  1. nav — A landmark for global navigation. Add an aria-label when needed
  2. Logo — Serves both brand recognition and a path back home
  3. Link group — Organized as a list structure showing main destinations
  4. Active state — Shows the current location both visually and to assistive technology
  5. Action area — Supporting region for login or primary CTAs

HTML Structure

Key points

  • Use <nav> to provide a navigation landmark
  • Structure links with <ul> / <li>
  • Mark the current page with aria-current="page"
  • If you include dropdowns, make sure they're keyboard-operable

CSS Implementation

Styling points

  • Lay out logo, links, and actions side by side with Flexbox
  • Indicate the active state with more than color alone: underline or bold weight
  • Show a clear focus ring with :focus-visible
  • For responsive layouts, consider wrapping or switching to a mobile nav

Accessibility

WCAG 2.4.5 Multiple Ways

The navbar acts as one way to reach main pages and complements other routes such as search or the footer.

WCAG 2.1.1 Keyboard

All links and any dropdown operation must be fully keyboard-accessible.

WCAG 2.4.7 Focus Visible

Display a clear focus ring so users can see where they are.

Keyboard operation

  • Use Tab to move between links
  • Press Enter to follow a link
  • Use Enter / Space to toggle a dropdown
  • Press Escape to close a dropdown

Live Demo

Basic navbar

A basic layout with logo and main links in a row.

PreviewFullscreen

With dropdowns

An example that hosts supporting menus using details / summary.

PreviewFullscreen

With action buttons

A header that groups CTAs and support actions on the right.

PreviewFullscreen

Common mistakes

Building navigation with div

Without the nav element, it isn't recognized as a landmark and is harder to discover as a navigation path.

Not providing a skip link

If the header is shared by every page, you should also offer a link to jump to the main content.

Hover-only dropdowns

Mouse-only opening means keyboard users and touch environments can't operate it.

Not indicating the current page

A navigation that doesn't show the current location makes the whole site harder to understand.