component

Navigation

USAJOBS features a consistent header for top-level navigation across the site.

Design Complete

New Unauthenticated (v2)

Accessibility

  • Ensure the navigation system is keyboard accessible. Users should be able to tab through each link.
  • Ensure the header which wraps the entire nav has the role set to "banner" and the nav must have a role set to "navigation". Refer to the W3C ARIA landmarks documentation.
  • Ensure that the Account and Search menu toggles have the aria-controls attribute set to the ID name of the container which uses the aria-expanded attribute set to false when hidden and true when expanded.

Usability

When to use
  • This variation is full bleed and conforms to the larger 1600px site wide max width. It also shows help at narrow view ports.

Implementation

  • The user's first and last initials are used at the narrowest viewport widths. At the M breakpoint (600px) the full first name of the user is shown.
  • Padding should be applied to the anchor element (a) to increase the tappable target size. The padding should also reach to the top and bottom of the navigation element.
  • Padding around the first element (logo) should reach to the left edge of the page to enlarge the tappable target.
  • Padding around the last element (Search) should reach to the right edge of the page to enlarge the tappable target.
  • As the user types into the location field an auto-complete box should appear below the input field suggesting locations that match a known list of locations. API for locations.
  • As the user types into the keyword field an auto-complete box should appear below the input field suggesting job titles, occupations, agencies & departments, and series that match known lists of those items.
  • The active state for search is a distinct treatment as it opens the search drawer that contains the search form.
New Authenticated (v2)

Usability

When to use
  • Use this variation when the user is authenticated via login.gov.
  • NOTE: This variation is depicting secondary navigation as well for when the user is on their home, profile, documents, or preferences pages.
Unauthenticated - Banner - post-transition

Accessibility

  • When the banner is in focus it should be dismissible via the keyboard.

Usability

When to use
  • Use the unauthenticated banner variation to explain to users our move to login.gov.
New Open Opportunities - Unauthenticated

Usability

When to use
  • Use this variation for the Open Opportunities application.
New Open Opportunities - Authenticated

Usability

When to use
  • Use this variation for the Open Opportunities application.
Logo-only

Usability

When to use
  • Use the Logo-only variation when the user should be prevented from navigating away from the current page. Examples inlcude the sign-in and create account pages.
Test & UAT environments

Usability

When to use
  • Use this variation in the test and UAT environments to make clear to any user of those systems that this is not the production system.
Agency Talent Portal

Usability

When to use
  • For use in the Agency Talent Portal product.