Skip to content

Latest commit

 

History

History

secondary-nav

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
styles
styles
 
 
readme.md
readme.md
 
 

readme.md

Willow-Secondary-Nav

Demo

Secondary Navigation provides navigational links that are separate from links provided by primary and footer navigation. Secondary navigation will appear on some pages of a site but not necessarily all pages. This navigation is meant for links a user may need in relation to their current page and they can link to content on their own page or to different pages. Secondary navigation can also be made up of common helpful links such as Contact, About, News, Legal, FAQ, etc.

HTML Snippet

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

Elements

willow-secondary-nav

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

Notes

  • willow-secondary-nav should be located within the willow-page-content component.
  • If using more than one willow-secondary-nav on a page update the willow-secondary-nav elements aria-label attribute to be more descriptive such as "account" or "products"
  • The use of role="navigation" with the <nav> element ensures that willow-secondary-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-secondary-nav__heading

  • Required
  • Restrictions
    • Should Contain: text

Notes

  • willow-secondary-nav__heading is hidden by default with the sr-only utility class, and is required to meet accessibility standards
  • Replace the text in this element with text that helps a user understand the context of this menu. e.g. "Product Page Menu, About Page Menu"

willow-secondary-nav__list

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

Notes

  • This order of the items in willow-secondary-nav__list does not matter greatly so the list will be marked up as a <ul> element

willow-secondary-nav__item

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

willow-secondary-nav__link

  • Required
  • Restrictions
    • Should Contain: text

Notes

  • willow-secondary-nav__link elements require an href that links to the page it references
  • willow-secondary-nav__link elements need an aria-label attribute value if the text content of the link doesn't clearly represent where the user will go after clicking the link