Navigation Color Patterns in Tailwind CSS

Design effective navigation color schemes for headers, sidebars, and tab bars using Tailwind CSS.

navigationheadersidebarwayfinding
beginner8 min readtutorial

Navigation Color Principles

Navigation color communicates hierarchy and state. Active items should be immediately obvious, inactive items should be readable but recessive, and hover states should provide feedback before clicking.

Top Navigation Bar

<nav class="bg-white border-b border-slate-200 px-6 py-3">
  <div class="flex items-center gap-8">
    <span class="text-slate-900 font-bold text-lg">Logo</span>
    <a class="text-blue-600 font-medium border-b-2 border-blue-600 pb-3 -mb-3">Dashboard</a>
    <a class="text-slate-600 hover:text-slate-900 font-medium">Projects</a>
    <a class="text-slate-600 hover:text-slate-900 font-medium">Settings</a>
  </div>
</nav>

Sidebar Navigation

<aside class="w-64 bg-slate-900 min-h-screen p-4">
  <a class="flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-600 text-white font-medium">
    <svg class="w-5 h-5"><!-- icon --></svg> Dashboard
  </a>
  <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-white mt-1">
    <svg class="w-5 h-5"><!-- icon --></svg> Analytics
  </a>
  <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-white mt-1">
    <svg class="w-5 h-5"><!-- icon --></svg> Settings
  </a>
</aside>

Navigation Color Rules

  • Active item: Brand color background or brand-colored text with indicator
  • Inactive items: Muted color (slate-500 or slate-400) that is still readable
  • Hover state: Slight background change or text darkening for feedback
  • Disabled items: Even more muted (slate-300) with cursor-not-allowed
  • Ensure active state is distinguishable for color-blind users via weight or indicator, not color alone

Frequently Asked Questions

Should navigation be dark or light?

Both work. Light navs (white with slate text) feel open and modern. Dark navs (slate-900) feel premium and create strong page structure. Match your brand personality.

How do I indicate the current page in navigation?

Use a combination of bold text, brand color, and a visual indicator like a bottom border or background highlight. Multiple cues help color-blind users identify the active item.

Try Our Color Tools

50+ free tools for Tailwind CSS developers. No signup required.

Explore Tools