<div class="context-nav">
  <span class="context-nav__label">Label for context navigation</span>
  <div class="context-nav__items">
    <span class="context-nav__item">
      <a href="#">Item one</a>
    </span>
    <span class="context-nav__item">
      <a href="#">Item two</a>
    </span>
    <span class="context-nav__item">
      <a href="#">Item three</a>
    </span>
    <span class="context-nav__item">
      <a href="#">Item four</a>
    </span>
  </div>
</div>

<div class="context-nav">
  <span class="context-nav__label">Label for longer list</span>
  <div class="context-nav__items">
    <span class="context-nav__item">
      <a href="#">Item one</a>
    </span>
    <span class="context-nav__item">
      <a href="#">Item two</a>
    </span>
    <span class="context-nav__item">
      <a href="#">Item three</a>
    </span>
    <span class="context-nav__item">
      <a href="#">Item four</a>
    </span>
    <div class="context-nav__expander">
      <span class="context-nav__more-button">
        More<span class="icon icon--blue-dark icon--down"></span>
      </span>
      <div class="context-nav__hidden">
        <span class="context-nav__item">
          <a href="#">Item five</a>
        </span>
        <span class="context-nav__item">
          <a href="#">Item six</a>
        </span>
        <span class="context-nav__item">
          <a href="#">Item seven</a>
        </span>
        <span class="context-nav__item">
          <a href="#">Item eight</a>
        </span>
      </div>
    </div>
  </div>
</div>