section-nav

The section-nav goes at the top of section pages when there is a manually-filled Nav links group in CUE. It’s a siple stack of an expander and icon row with small adjustments. On load, the section nav should be collapsed. If there isn’t a filled Nav links group in CUE it should render as a standard h1 with no caret by ommitting the expander class.

On mobile (600px), the section-nav headline reduces in size and the expandable list switches to a vertical stack with center alignment.

EXAMPLE

The section nav is included in the section deck and is better represented there.

HTML

<section class="section-nav">
  <h1 class="expander title h1" onclick="this.classList.toggle('open')">Sports</h1>
  <div class="icons summary">
    <a href="#">NFL</a>
    <a href="#">MLB</a>
    <a href="#">NBA</a>
    <a href="#">College</a>
  </div>
</section>