Markup structure for a flexible navigation component.

00-requirements.md

Requirements:

• Every sub navigation must have a depth class: nav--depthN
• The container and each <ul> must support arbitrary class names to be passed to the component from the CMS.
• Each nav__item should get an additional class corresponding to its text node, for example:
  • <li class="nav__item">Example</li> ---> <li class="nav__item nav__item--example">Example</li>
• The current node gets a class of nav_item--self
  • If the current node is a child node deeper than nav--depth0 then the node's root list item gets a class of nav_item--current

Notes:

• Any class wrapped in {{ class }} denotes a dynamic class passed to the component from the backend/CMS.
• Line breaks in the markup are for clarity, production code shouldn't have them.

01-navigation.html

<nav class="nav-container {{nav-container--primary}}">

  <ul class="nav {{nav--primary}} nav--depth0">
    <li class="nav_item nav_item--home"><a href="#" class="nav_link">Home</a></li>
    <li class="nav_item nav_item--current nav_item--has-children nav_item--products">
      <a href="#" class="nav_link">Products</a>

      <ul class="nav_sub nav--depth1 {{nav_sub--arbitrary-products-nav-name}}">
        <li class="nav_item nav_item--socks nav_item--self"><a href="#" class="nav_link">Socks</a></li>
        <li class="nav_item nav_item--has-children nav_item--shirts">
          <a href="#" class="nav_link">Shirts</a>

          <ul class="nav_sub nav--depth2 {{nav_sub--another-arbitrary-name}}">
            <li class="nav_item nav_item--long-sleeve"><a href="#" class="nav_link">Long Sleeve</a></li>
            <li class="nav_item nav_item--has-children nav_item--short-sleeve">
              <a href="#" class="nav_link">Short Sleeve</a>

              <ul class="nav_sub nav--depth3">
                <li class="nav_item nav_item--stripes"><a href="#" class="nav_link">Stripes</a></li>
                <li class="nav_item nav_item--polka-dots"><a href="#" class="nav_link">Polka Dots</a></li>
                <li class="nav_item nav_item--solid"><a href="#" class="nav_link">Solid</a></li>
              </ul>

            </li>
            <li class="nav_item nav_item--polo-sport"><a href="#" class="nav_link">Polo Sport</a></li>
          </ul>

        </li>
      </ul>

    </li>
    <li class="nav_item nav_item--news"><a href="#" class="nav_link">News</a></li>
    <li class="nav_item nav_item--community nav_item--has-dropdown">
      <a href="#" class="nav_link">Community</a>

      <ul class="nav_sub nav_sub--dropdown nav--depth1">
        <li class="nav_item nav_item--forum"><a href="#" class="nav_link">Forum</a></li>
        <li class="nav_item nav_item--facebook"><a href="#" class="nav_link">Facebook</a></li>
        <li class="nav_item nav_item--youtube nav_item--has-dropdown">
          <a href="#" class="nav_link">Youtube</a>

          <ul class="nav_sub nav_sub--dropdown nav--depth1">
            <li class="nav_item nav_item--channel-a"><a href="#" class="nav_link">Channel A</a></li>
            <li class="nav_item nav_item--channel-b"><a href="#" class="nav_link">Channel B</a></li>
            <li class="nav_item nav_item--channel-c"><a href="#" class="nav_link">Channel C</a></li>
          </ul>

        </li>
      </ul>

    </li>
  </ul>

</nav>