Subnav

In groundhog since v2.0.0

Examples


<div class="subnav">
  <nav class="subnav__bar">
    <ul class="subnav__list">
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Perform 2018</a>
      </li>
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Speakers</a>
      </li>
      <li class="subnav__item is-current">
        <a class="subnav__link" href="#noop">Schedule</a>
      </li>
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Workshops</a>
      </li>
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Locations</a>
      </li>
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Partners</a>
      </li>
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Tickets</a>
      </li>
    </ul>
  </nav>
</div>


<div class="subnav">
  <nav class="subnav__bar expandable expandable--subnav">
    <a href="#noop" class="expandable__trigger">Workshops</a>
    <ul class="subnav__list expandable__content">
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Perform 2018</a>
      </li>
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Speakers</a>
      </li>
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Schedule</a>
      </li>
      <li class="subnav__item is-current">
        <a class="subnav__link" href="#noop">Workshops</a>
      </li>
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Locations</a>
      </li>
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Partners</a>
      </li>
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Tickets</a>
      </li>
    </ul>
  </nav>
</div>


<div class="theme--blue">
  <div class="subnav">
    <nav class="subnav__bar expandable expandable--subnav">
      <a href="#noop" class="expandable__trigger">Schedule</a>
      <ul class="subnav__list expandable__content">
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Perform 2018</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Speakers</a>
        </li>
        <li class="subnav__item is-current">
          <a class="subnav__link" href="#noop">Schedule</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Workshops</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Locations</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Partners</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Tickets</a>
        </li>
      </ul>
    </nav>
  </div>
</div>


<div class="theme--purple">
  <div class="subnav">
    <nav class="subnav__bar expandable expandable--subnav">
      <a href="#noop" class="expandable__trigger">Schedule</a>
      <ul class="subnav__list expandable__content">
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Perform 2018</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Speakers</a>
        </li>
        <li class="subnav__item is-current">
          <a class="subnav__link" href="#noop">Schedule</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Workshops</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Locations</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Partners</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Tickets</a>
        </li>
      </ul>
    </nav>
  </div>
</div>


<div class="theme--royalblue">
  <div class="subnav">
    <nav class="subnav__bar expandable expandable--subnav">
      <a href="#noop" class="expandable__trigger">Schedule</a>
      <ul class="subnav__list expandable__content">
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Perform 2018</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Speakers</a>
        </li>
        <li class="subnav__item is-current">
          <a class="subnav__link" href="#noop">Schedule</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Workshops</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Locations</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Partners</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Tickets</a>
        </li>
      </ul>
    </nav>
  </div>
</div>


<div class="theme--green">
  <div class="subnav">
    <nav class="subnav__bar expandable expandable--subnav">
      <a href="#noop" class="expandable__trigger">Schedule</a>
      <ul class="subnav__list expandable__content">
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Perform 2018</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Speakers</a>
        </li>
        <li class="subnav__item is-current">
          <a class="subnav__link" href="#noop">Schedule</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Workshops</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Locations</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Partners</a>
        </li>
        <li class="subnav__item">
          <a class="subnav__link" href="#noop">Tickets</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

Introduction

The Groundhog subnav usually holds links to child pages of the current page. It appears together with the navbar instead of the breadcrumbs component.

Subnav versions

The Groundhog subnav appears in two versions:

Without expandable behavior on mobile: <nav class="subnav__bar">
With expandable behavior on mobile: <nav class="subnav__bar expandable expandable--subnav">

Including the subnav

To include a Groundhog subnav add a <ul> element that contains links to pages as <li> items and wrap the list in a <nav> and a <div> element.

Add the necessary Groundhog classes to the elements.

<div class="subnav">
<nav class="subnav__bar">
 <ul class="subnav__list">
   <li class="subnav__item">
     <a class="subnav__link" href="#">Speakers</a>
   </li>
   <li class="subnav__item">
     <a class="subnav__link" href="#">Schedule</a>
   </li>
   ...
 </ul>
</nav>
</div>

To add the expandable behavior for small screens add an expandable trigger and all necessary classes from Groundhog's expandable component. The text of the expandable trigger should always be the same as the linktext of the current subnav item.

<div class="subnav">
<nav class="subnav__bar expandable expandable--subnav">
 <a href="#" class="expandable__trigger">Schedule</a>
 <ul class="subnav__list expandable__content">
   <li class="subnav__item">
     <a class="subnav__link" href="#">Speakers</a>
   </li>
   <li class="subnav__item is-current">
     <a class="subnav__link" href="#">Schedule</a>
   </li>
   ...
 </ul>
</nav>
</div>

Available classes for subnav and its elements

class name	effect
`.subnav`	Base class for the subnav element
`.subnav__bar expandable--subnav`	Adds expandable behavior to subnav bar on mobile
`.nav__item is-current`	Indicates that page or a child page is currently selected