Foreign Affairs Style Guide

Foreign Affairs

Event Detail -- Tabbed Nav

This is the tabbed navigation on an event detail page. It is made up of four tabs and reloads the sections beneath it.

Data Sources:
Known Omissions:
    <nav class="event-sticky-nav-container">
      <div class="">
        <ul class="event-nav">
          <li><a href="#event-detail-1" class="event-nav__item item-1" href="#">Overview</a></li>
          <li><a href="#event-detail-2" class="event-nav__item item-2" href="#">Agenda</a></li>
          <li><a href="#event-detail-3" class="event-nav__item item-3" href="#">Speakers</a></li>
          <li><a href="#event-detail-4" class="event-nav__item item-4" href="#">Partners</a></li>
        </ul>
      </div>
    </nav>