---
layout: styleguide-full-bleed
type: component
title: Navigation
lead: USAJOBS features a consistent header for top-level navigation across the site.
---
Design Complete
New Unauthenticated (v2)
{% include components/nav/v2/unauth.html %}
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)
{% include components/nav/v2/auth.html %}
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
{% include components/nav/v2/unauth-banner.html %}
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
{% include components/nav/v2/open-opps-unauth.html %}
Usability
When to use
Use this variation for the Open Opportunities application.
New Open Opportunities - Authenticated
{% include components/nav/v2/open-opps-auth.html %}
Usability
When to use
Use this variation for the Open Opportunities application.
Logo-only
{% include components/nav/logo-only.html %}
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
{% include components/nav/v2/test.html %}
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.