Stack Nav - Component

Block links with an active state for current page.

View full screen
Code

Source (Nunjucks)

<ul role="list" class="stack-nav">
  {% for item in data.items %}
    <li>
      <a class="repel" href="{{ item.url }}" {% if item.active %}aria-current="page"{% endif %}>
        <span class="cluster">
          {% if item.prefix %}
          <span class="stack-nav__meta">{{ item.prefix }}</span>
          {% endif %}
          <span>{{ item.text }}</span>
        </span>
        <span class="cluster">
          {% if item.suffix %}
            <span class="stack-nav__meta">{{ item.suffix }}</span>
          {% endif %}
          {% if item.icon %}
            {% include "icons/" + item.icon %}
          {% endif %}
        </span>
      </a>
    </li>
  {% endfor %}
</ul>

Output

<ul role="list" class="stack-nav">
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span>Lorem ipsum dolor</span>
      </span>
      <span class="cluster"> </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#" aria-current="page">
      <span class="cluster">
        <span>Tristique Ornare Commodo</span>
      </span>
      <span class="cluster"> </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span>Adipiscing Amet Ullamcorper</span>
      </span>
      <span class="cluster"> </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span>Risus Adipiscing</span>
      </span>
      <span class="cluster"> </span>
    </a>
  </li>
</ul>

Information

The active state will only show if the correct aria-current="page" attribute is set on the <a> elements.

You can add a meta element (.stack-nav__meta) which will display as a smaller, monospaced element. It's recommended that you use the cluster layout composition to group this with the main text element if used as a prefix.

You can also add an SVG and in this situation, apply a .repel class, which will then use the repel layout composition to push the icon and text away from each other.

You can apply .stack-nav directly to a list (<ol>/<ul>) or as a parent class. If you use the parent class, be sure to apply .stack-nav__list to activate reset styles. This is the recommended pattern for headed/nested contexts.

Key links

Variants

Headed (Nested)

View full screen
Code

Source (Nunjucks)

<div class="stack-nav">
  <ul role="list" class="stack-nav__list">
    {% for item in data.topItems %}
      <li>
        <a class="repel" href="{{ item.url }}" {% if item.active %}aria-current="page"{% endif %}>
          <span class="cluster">
            {% if item.prefix %}
            <span class="stack-nav__meta">{{ item.prefix }}</span>
            {% endif %}
            <span>{{ item.text }}</span>
          </span>
          {% if item.icon %}
            {% include "icons/" + item.icon %}
          {% endif %}
        </a>
      </li>
    {% endfor %}
  </ul>
  <h3 class="stack-nav__heading">{{ data.heading }}</h3>
  <ul role="list" class="stack-nav__list">
    {% for item in data.headedItems %}
      <li>
        <a class="repel" href="{{ item.url }}" {% if item.active %}aria-current="page"{% endif %}>
          <span class="cluster">
            {% if item.prefix %}
            <span class="stack-nav__meta">{{ item.prefix }}</span>
            {% endif %}
            <span>{{ item.text }}</span>
          </span>
          {% if item.icon %}
            {% include "icons/" + item.icon %}
          {% endif %}
        </a>
      </li>
    {% endfor %}
  </ul>
</div>

Output

<div class="stack-nav">
  <ul role="list" class="stack-nav__list">
    <li>
      <a class="repel" href="#">
        <span class="cluster">
          <span class="stack-nav__meta">001</span>
          <span>Lorem ipsum dolor</span>
        </span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          fill="currentColor"
          role="img"
          aria-label="Check"
        >
          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
        </svg>
      </a>
    </li>
    <li>
      <a class="repel" href="#" aria-current="page">
        <span class="cluster">
          <span class="stack-nav__meta">002</span>
          <span>Tristique Ornare Commodo</span>
        </span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          fill="currentColor"
          role="img"
          aria-label="Check"
        >
          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
        </svg>
      </a>
    </li>
    <li>
      <a class="repel" href="#">
        <span class="cluster">
          <span class="stack-nav__meta">003</span>
          <span>Adipiscing Amet Ullamcorper</span>
        </span>
      </a>
    </li>
    <li>
      <a class="repel" href="#">
        <span class="cluster">
          <span class="stack-nav__meta">004</span>
          <span>Risus Adipiscing</span>
        </span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          fill="currentColor"
          role="img"
          aria-label="Check"
        >
          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
        </svg>
      </a>
    </li>
  </ul>
  <h3 class="stack-nav__heading">A heading for a section</h3>
  <ul role="list" class="stack-nav__list">
    <li>
      <a class="repel" href="#">
        <span class="cluster">
          <span class="stack-nav__meta">005</span>
          <span>Lorem ipsum dolor</span>
        </span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          fill="currentColor"
          role="img"
          aria-label="Check"
        >
          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
        </svg>
      </a>
    </li>
    <li>
      <a class="repel" href="#">
        <span class="cluster">
          <span class="stack-nav__meta">006</span>
          <span>Tristique Ornare Commodo</span>
        </span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          fill="currentColor"
          role="img"
          aria-label="Check"
        >
          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
        </svg>
      </a>
    </li>
    <li>
      <a class="repel" href="#">
        <span class="cluster">
          <span class="stack-nav__meta">007</span>
          <span>Adipiscing Amet Ullamcorper</span>
        </span>
      </a>
    </li>
    <li>
      <a class="repel" href="#">
        <span class="cluster">
          <span class="stack-nav__meta">008</span>
          <span>Risus Adipiscing</span>
        </span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          fill="currentColor"
          role="img"
          aria-label="Check"
        >
          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
        </svg>
      </a>
    </li>
  </ul>
</div>

With Icon

View full screen
Code

Source (Nunjucks)

<ul role="list" class="stack-nav">
  {% for item in data.items %}
    <li>
      <a class="repel" href="{{ item.url }}" {% if item.active %}aria-current="page"{% endif %}>
        <span class="cluster">
          {% if item.prefix %}
          <span class="stack-nav__meta">{{ item.prefix }}</span>
          {% endif %}
          <span>{{ item.text }}</span>
        </span>
        <span class="cluster">
          {% if item.suffix %}
            <span class="stack-nav__meta">{{ item.suffix }}</span>
          {% endif %}
          {% if item.icon %}
            {% include "icons/" + item.icon %}
          {% endif %}
        </span>
      </a>
    </li>
  {% endfor %}
</ul>

Output

<ul role="list" class="stack-nav">
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span>Lorem ipsum dolor</span>
      </span>
      <span class="cluster">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          fill="currentColor"
          role="img"
          aria-label="Check"
        >
          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
        </svg>
      </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#" aria-current="page">
      <span class="cluster">
        <span>Tristique Ornare Commodo</span>
      </span>
      <span class="cluster">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          fill="currentColor"
          role="img"
          aria-label="Check"
        >
          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
        </svg>
      </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span>Adipiscing Amet Ullamcorper</span>
      </span>
      <span class="cluster"> </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span>Risus Adipiscing</span>
      </span>
      <span class="cluster">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          fill="currentColor"
          role="img"
          aria-label="Check"
        >
          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
        </svg>
      </span>
    </a>
  </li>
</ul>

With Icon And Prefix

View full screen
Code

Source (Nunjucks)

<ul role="list" class="stack-nav">
  {% for item in data.items %}
    <li>
      <a class="repel" href="{{ item.url }}" {% if item.active %}aria-current="page"{% endif %}>
        <span class="cluster">
          {% if item.prefix %}
          <span class="stack-nav__meta">{{ item.prefix }}</span>
          {% endif %}
          <span>{{ item.text }}</span>
        </span>
        <span class="cluster">
          {% if item.suffix %}
            <span class="stack-nav__meta">{{ item.suffix }}</span>
          {% endif %}
          {% if item.icon %}
            {% include "icons/" + item.icon %}
          {% endif %}
        </span>
      </a>
    </li>
  {% endfor %}
</ul>

Output

<ul role="list" class="stack-nav">
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span class="stack-nav__meta">001</span>
        <span>Lorem ipsum dolor</span>
      </span>
      <span class="cluster">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          fill="currentColor"
          role="img"
          aria-label="Check"
        >
          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
        </svg>
      </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#" aria-current="page">
      <span class="cluster">
        <span class="stack-nav__meta">002</span>
        <span>Tristique Ornare Commodo</span>
      </span>
      <span class="cluster">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          fill="currentColor"
          role="img"
          aria-label="Check"
        >
          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
        </svg>
      </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span class="stack-nav__meta">003</span>
        <span>Adipiscing Amet Ullamcorper</span>
      </span>
      <span class="cluster"> </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span class="stack-nav__meta">004</span>
        <span>Risus Adipiscing</span>
      </span>
      <span class="cluster">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          fill="currentColor"
          role="img"
          aria-label="Check"
        >
          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
        </svg>
      </span>
    </a>
  </li>
</ul>

With Prefix

View full screen
Code

Source (Nunjucks)

<ul role="list" class="stack-nav">
  {% for item in data.items %}
    <li>
      <a class="repel" href="{{ item.url }}" {% if item.active %}aria-current="page"{% endif %}>
        <span class="cluster">
          {% if item.prefix %}
          <span class="stack-nav__meta">{{ item.prefix }}</span>
          {% endif %}
          <span>{{ item.text }}</span>
        </span>
        <span class="cluster">
          {% if item.suffix %}
            <span class="stack-nav__meta">{{ item.suffix }}</span>
          {% endif %}
          {% if item.icon %}
            {% include "icons/" + item.icon %}
          {% endif %}
        </span>
      </a>
    </li>
  {% endfor %}
</ul>

Output

<ul role="list" class="stack-nav">
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span class="stack-nav__meta">001</span>
        <span>Lorem ipsum dolor</span>
      </span>
      <span class="cluster"> </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#" aria-current="page">
      <span class="cluster">
        <span class="stack-nav__meta">002</span>
        <span>Tristique Ornare Commodo</span>
      </span>
      <span class="cluster"> </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span class="stack-nav__meta">003</span>
        <span>Adipiscing Amet Ullamcorper</span>
      </span>
      <span class="cluster"> </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span class="stack-nav__meta">004</span>
        <span>Risus Adipiscing</span>
      </span>
      <span class="cluster"> </span>
    </a>
  </li>
</ul>

With Suffix

View full screen
Code

Source (Nunjucks)

<ul role="list" class="stack-nav">
  {% for item in data.items %}
    <li>
      <a class="repel" href="{{ item.url }}" {% if item.active %}aria-current="page"{% endif %}>
        <span class="cluster">
          {% if item.prefix %}
          <span class="stack-nav__meta">{{ item.prefix }}</span>
          {% endif %}
          <span>{{ item.text }}</span>
        </span>
        <span class="cluster">
          {% if item.suffix %}
            <span class="stack-nav__meta">{{ item.suffix }}</span>
          {% endif %}
          {% if item.icon %}
            {% include "icons/" + item.icon %}
          {% endif %}
        </span>
      </a>
    </li>
  {% endfor %}
</ul>

Output

<ul role="list" class="stack-nav">
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span class="stack-nav__meta">001</span>
        <span>Lorem ipsum dolor</span>
      </span>
      <span class="cluster"> </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#" aria-current="page">
      <span class="cluster">
        <span class="stack-nav__meta">002</span>
        <span>Tristique Ornare Commodo</span>
      </span>
      <span class="cluster">
        <span class="stack-nav__meta">New!</span>
      </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span class="stack-nav__meta">003</span>
        <span>Adipiscing Amet Ullamcorper</span>
      </span>
      <span class="cluster"> </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span class="stack-nav__meta">004</span>
        <span>Risus Adipiscing</span>
      </span>
      <span class="cluster"> </span>
    </a>
  </li>
</ul>

With Suffix and Icon

View full screen
Code

Source (Nunjucks)

<ul role="list" class="stack-nav">
  {% for item in data.items %}
    <li>
      <a class="repel" href="{{ item.url }}" {% if item.active %}aria-current="page"{% endif %}>
        <span class="cluster">
          {% if item.prefix %}
          <span class="stack-nav__meta">{{ item.prefix }}</span>
          {% endif %}
          <span>{{ item.text }}</span>
        </span>
        <span class="cluster">
          {% if item.suffix %}
            <span class="stack-nav__meta">{{ item.suffix }}</span>
          {% endif %}
          {% if item.icon %}
            {% include "icons/" + item.icon %}
          {% endif %}
        </span>
      </a>
    </li>
  {% endfor %}
</ul>

Output

<ul role="list" class="stack-nav">
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span class="stack-nav__meta">001</span>
        <span>Lorem ipsum dolor</span>
      </span>
      <span class="cluster">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          fill="currentColor"
          role="img"
          aria-label="Check"
        >
          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
        </svg>
      </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#" aria-current="page">
      <span class="cluster">
        <span class="stack-nav__meta">002</span>
        <span>Tristique Ornare Commodo</span>
      </span>
      <span class="cluster">
        <span class="stack-nav__meta">New!</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          fill="currentColor"
          role="img"
          aria-label="Check"
        >
          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
        </svg>
      </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span class="stack-nav__meta">003</span>
        <span>Adipiscing Amet Ullamcorper</span>
      </span>
      <span class="cluster">
        <span class="stack-nav__meta">New!</span>
      </span>
    </a>
  </li>
  <li>
    <a class="repel" href="#">
      <span class="cluster">
        <span class="stack-nav__meta">004</span>
        <span>Risus Adipiscing</span>
      </span>
      <span class="cluster"> </span>
    </a>
  </li>
</ul>