Subnav

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.

The Groundhog subnav appears in two versions:

Including the subnav

  1. 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.

  2. 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>
    
  3. 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