Nav

{{ design.patterns.renderPattern('nav', {}) | safe }}

Source (Nunjucks)

<nav aria-label="{{ data.label }}" class="nav">
  <ul class="{{ 'flow' if data.variant === 'stacked' else 'cluster' }}" role="list">
    {% for item in data.items %}
      <li>
        <a href="{{ item.href }}" {% if item.current %}aria-current="page"{% endif %}>{{ item.label }}</a>
      </li>
    {% endfor %}
  </ul>
</nav>

Information

The layout is controlled by flow and cluster. The variants in this pattern library only change that layout system.

By design, the nav will inherit font size, so it's imperative you account for that in your page context, either with utility classes or context specific CSS.

Variants

Stacked

{{ design.patterns.renderPattern('nav/stacked', {}) | safe }}

View full screen

Source (Nunjucks)

<nav aria-label="{{ data.label }}" class="nav">
  <ul class="{{ 'flow' if data.variant === 'stacked' else 'cluster' }}" role="list">
    {% for item in data.items %}
      <li>
        <a href="{{ item.href }}" {% if item.current %}aria-current="page"{% endif %}>{{ item.label }}</a>
      </li>
    {% endfor %}
  </ul>
</nav>