Skip to content

Latest commit

 

History

History

footer-nav

Folders and files

NameName
Last commit message
Last commit date

parent directory

..

styles

styles

 
 

readme.md

readme.md

 
 

readme.md

Willow-Footer-Nav

Footer navigation is typically a combination of the links in the site's primary navigation plus links to items that users commonly search for or use. Footer navigation should be located within the willow-page-footer component and the links in this navigation should be consistent on every page of the site.

Example Page Links: Sitemap, Frequently Asked Questions, Legal, Privacy Policy, Terms & Conditions, and Print Page.

HTML Snippet

<nav class="willow-footer-nav" role="navigation" aria-label="footer">
  <h1 class="willow-footer-nav__heading sr-only">Site Footer Menu</h1>
  <ul class="willow-footer-nav__list">
      <li class="willow-footer-nav__item"><a class="willow-footer-nav__link" href="" aria-label="">Menu Item 1</a></li>
      <li class="willow-footer-nav__item"><a class="willow-footer-nav__link" href="" aria-label="">Menu Item 2</a></li>
  </ul>
</nav>

Elements

willow-footer-nav

  • Required
  • Restrictions
    • Should Contain: willow-footer-nav elements

Notes

  • The use of role="navigation" with the <nav> element ensures that willow-footer-nav is accessible for user agents that do not support HTML5. The use of both <nav> and <role="navigation"> together may create a warning in an HTML validator but we left this pattern intact for now to cover all of our accessibility bases.

willow-footer-nav__heading

  • Required
  • Restrictions
    • Should Contain: text

Notes

  • willow-footer-nav__heading is hidden by default with the sr-only utility class, and is required to meet accessibility standards

willow-footer-nav__list

  • Required
  • Restrictions
    • Should Contain: one or more willow-footer-nav__item elements

Notes

  • the order items in willow-footer-nav__list does not matter greatly, so the list is marked up as a <ul> element

willow-footer-nav__item

  • Required
  • Repeatable
  • Restrictions
    • Should Contain: one willow-footer-nav__link element

willow-footer-nav__link

  • Required
  • Restrictions
    • Should Contain: text

Notes

  • willow-footer-nav__link requires an href value that links to the pages they reference
  • willow-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