Skip to content

USWDS - Header: Add navigation link color setting#6662

Open
manichandra wants to merge 2 commits into
uswds:developfrom
manichandra:codex/uswds-6176-nav-link-color
Open

USWDS - Header: Add navigation link color setting#6662
manichandra wants to merge 2 commits into
uswds:developfrom
manichandra:codex/uswds-6176-nav-link-color

Conversation

@manichandra
Copy link
Copy Markdown
Contributor

Summary

Added configurable color settings for header navigation links. Header nav links now use theme settings for their default and hover colors, allowing teams to customize navigation color without custom CSS overrides.

Breaking change

This is not a breaking change.

Related issue

Closes #6176

Related pull requests

A follow-up uswds-site PR may be needed to document the new $theme-navigation-link-color and $theme-navigation-link-hover-color settings.

Preview link

Preview link: N/A

Problem statement

Header navigation link color was hard-coded to base-dark, and hover color was hard-coded to primary. Teams that needed different navigation colors had to override USWDS CSS in their projects.

Solution

Added $theme-navigation-link-color and $theme-navigation-link-hover-color component settings. The new settings default to the existing colors, so the default compiled appearance remains unchanged while allowing teams to configure both states.

Major changes

  • Added $theme-navigation-link-color.
  • Added $theme-navigation-link-hover-color.
  • Updated primary nav link and button color styles to use the new settings.

Testing and review

  • npx prettier --check packages/uswds-core/src/styles/settings/_settings-components.scss packages/usa-nav/src/styles/_usa-nav.scss
  • npx stylelint packages/uswds-core/src/styles/settings/_settings-components.scss packages/usa-nav/src/styles/_usa-nav.scss
  • npx gulp compileSass
  • npm run lint:sass
  • git diff --check
  • Manually verified the default Header story in Storybook.
  • Compiled a temporary Sass entry with custom navigation link and hover colors and confirmed generated CSS used both configured colors.

@chandracarney chandracarney added Affects: Visual Design Relates to how our components look on-screen Affects: Display Relates to how code renders on-screen Package: Header labels May 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Affects: Display Relates to how code renders on-screen Affects: Visual Design Relates to how our components look on-screen Package: Header

Projects

Status: Triage

Development

Successfully merging this pull request may close these issues.

USWDS - Bug: $nav-link-color hard-coded to base-dark

2 participants