🧭 Navigation Design Principles

Navigation design significantly impacts users with cognitive differences, ADHD, and autism. Consistent, predictable navigation helps users understand where they are and find what they need.

Design Guidelines

Skip Navigation Link

<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <nav><!-- Navigation content --></nav>
  <main id="main-content">
    <!-- Main content -->
  </main>
</body>

/* Skip link styling */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #005fcc;
  color: white;
  padding: 1rem;
  z-index: 100;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

/* Current navigation item */
.nav-item.current {
  background-color: #e0f2fe;
  border-left: 4px solid #0284c7;
  font-weight: 600;
}

/* Breadcrumb navigation */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.breadcrumb-separator {
  color: #9ca3af;
}

React Components

interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface BreadcrumbProps {
  items: BreadcrumbItem[];
}

export function Breadcrumb({ items }: BreadcrumbProps) {
  return (
    <nav aria-label="Breadcrumb" className="flex items-center gap-2 text-sm py-2">
      <Link
        href="/"
        className="text-neutral-500 hover:text-primary transition-colors"
        aria-label="Home"
      >
        <Home className="w-4 h-4" />
      </Link>

      {items.map((item, index) => (
        <div key={index} className="flex items-center gap-2">
          <ChevronRight className="w-4 h-4 text-neutral-400" />
          {item.href ? (
            <Link
              href={item.href}
              className="text-neutral-500 hover:text-primary transition-colors"
            >
              {item.label}
            </Link>
          ) : (
            <span className="text-neutral-900 font-medium" aria-current="page">
              {item.label}
            </span>
          )}
        </div>
      ))}
    </nav>
  );
}

// Skip Link Component
export function SkipLink() {
  return (
    <a href="#main-content" className="skip-link">
      Skip to main content
    </a>
  );
}

Descriptive Link Text

Checklist

• Navigation structure is consistent across pages
• Skip to main content link is provided
• Breadcrumbs show current location
• Current page/section is clearly highlighted
• Link text describes destination
• Search function is available
• Site map is accessible
• Navigation is keyboard accessible

Related Resources

• Layout Principles
• Forms
• Attention & Focus