---
component: Footer Navigation
collection: 
    - component
    - navigation
---
# Footer Navigation

## Why and When to Use

The footer navigation is meant for supplemental links. This navigation list should be located within the Page Footer component at the bottom of every page. The items in the footer navigation should be consistent on every page  of the site and may not directly relate to the main goal of each page.

*Common Footer Navigation Examples: Copyright, Legal, Contact, Terms & Conditions, etc.*
*Other options to include are Social Media links, Print Page Option, Back To Top link, or other features important to the site that do not interfere with the main content of the page.*


## How to Use

The Footer Navigation component is a list of items whose order does not matter greatly 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 Footer 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. Anchor tags require an href that links to the pages they reference
1. Repeat the footer-nav__item elements as many times as needed
1. footer-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="footer-nav" role="navigation" aria-label="Footer Navigation">
        <h1 class="footer-nav__heading--sr">Footer Navigation</h1>
        <ul class="footer-nav__list">
            <li class="footer-nav__item"><a class="footer-nav__link" href="" aria-label="">Menu Item 1</a></li>
            <li class="footer-nav__item"><a class="footer-nav__link" href="" aria-label="">Menu Item 2</a></li>
            <li class="footer-nav__item"><a class="footer-nav__link" href="" aria-label="">Menu Item 3</a></li>
        </ul>
    </nav>
```