---
component: Primary Navigation
collection: 
    - navigation
    - component
---
# Primary Navigation

## Why and When to Use

Primary Navigation is meant for links to primary content that will be accessed often by most users such as general information topics and main category sections of the website (*Example: Home, Employers, Brokers, Career Seekers*).  Content located here should reflect the larger goal of the website and may relate to sections of secondary navigation, but should not be a repeat of secondary navigation.

The Primary Navigation should only be used once on a page. The way this content is presented can be flexible as long as it is consistent and accessible on each page of the site and contains the general information that a user is looking for. This navigation should take precedence over any other forms of navigation on the page.

## How to Use

The Primary Navigation should be located within the Page Header component at the top of every page. This component is a list of items whose order does not matter therefore it will be marked up using nav and unordered list HTML elements.  The items within the list will be marked up as a text links.

This Primary Navigation includes a heading because it is necessary for accessibility. The heading will be hidden visually because of the "--sr" modifier added to the heading class name.

NEEDS:

1. Add JavaScript to primary-nav__toggle-link to reveal menu in mobile view
1. primary-nav__link elements require an href that links to the pages they reference
1. Repeat the primary-nav__item elements as needed **but not too many times** - the more choices a user has the longer it will take them to find what they need.  Google Hick's law for more info.
1. primary-nav__link elements need aria-label value if the text content of the link doesn't clearly represent where the user will go after clicking the link

```HTML
    <nav class="primary-nav" role="navigation" aria-label="Primary Navigation">
        <h1 class="primary-nav__heading--sr">Primary Nav</h1>
        <a class="primary-nav__toggle-link" href="#">☰ Menu</a>
        <ul class="primary-nav__list">
            <li class="primary-nav__item"><a class="primary-nav__link" href="" aria-label="">Menu Item 1</a></li>
            <li class="primary-nav__item"><a class="primary-nav__link" href="" aria-label="">Menu Item 2</a></li>
            <li class="primary-nav__item"><a class="primary-nav__link" href="" aria-label="">Menu Item 3</a></li>
        </ul>
    </nav>
```