Navigation is the one UI pattern that appears on every page of your site and gets interacted with on nearly every visit. The color decisions in your nav directly impact how easily users find what they need.
Active State: The Most Important Nav Color
The active state indicator tells users "you are here." It needs to be visually distinct from inactive nav items. The most common pattern is using your primary brand color for the active state: a colored underline, colored text, or a colored background pill. Whatever the pattern, the active indicator must be immediately obvious at a glance.
Hover States
Hover states on nav items confirm interactivity. They should be visually distinct from both the default state and the active state. A common approach: default state uses your dark base text color, hover introduces a primary tint (lighter background or colored text), and active uses the full primary color.
Dropdown Menus
Dropdown menus introduce a layering challenge. The dropdown surface needs to be visually distinct from the page background (a subtle shadow or slightly different background tone). Items within the dropdown follow the same default/hover/active pattern as the main nav, but the visual treatment can be more subtle since the user is already engaged.
Breadcrumbs
Breadcrumbs are secondary navigation and should use muted colors: your muted text color for inactive crumbs, your primary for the current page, and a mid-tone for the separator characters. Breadcrumbs should never compete visually with the main nav.
Mobile Navigation
On mobile, navigation colors often need to be bolder because touch targets are larger and the visual environment is more constrained. Active states should be even more prominent on mobile than desktop to compensate for the smaller screen and faster scanning behavior.