Panel Menu

Panel menus are used to display links related to a section of an application.

Single-Level Example


When to Use

  • To display navigational links when it is necessary for a user to have persistent access to the links from the current screen (desktop or tablet).
  • When a section of an application has more than three levels of navigation (since only three levels may appear in the Header navigation).
  • A standard panel menu displays links that take the user to a new screen. When using a panel menu to display intra-page links, use the appropriate visual treatment (see example).

When Not to Use

  • For secondary and tertiary navigation that the user does not need visible on the screen, use the dropdown menu in the Header.

Variations

Usage

  • Panel menus may include up to three levels of nested links.
  • Do not duplicate Header navigation in the side panel menu.
  • When more than one level appears, use the Expand/Collapse treatment.
  • Groups of links may include a group label (a heading that doesn’t have a corresponding page).
  • Panel menus typically appear on the left side of the screen.
  • On small and xsmall screen sizes (below 796 px), the links in the panel menu appear within the slide-out menu. See Header navigation for details.

Variations

Two-level Example


Three-level Example


Group-Label Example


Intra-Page Example


Developer Notes

A panel menu is created by adding the .spark-menu and .spark-menu--panel classes to an element, preferably a <nav>. The menu items should be contained inside of a <ul> with a class of .spark-menu__list. Each item should have a class of .spark-menu__list-item.

The link for a list item should be an <a> tag with a class of .spark-menu__list-link.

For nested lists, additional .spark-menu__list elements should be placed inside of a .spark-menu__list-item (but not inside of the .spark-menu__list-link). If an item contains a nested list but is not itself a link to a page, the .spark-menu__list-link should also have a class of .spark-menu__list-expand.

If an item is a link to a page and also has a nested list of items, an element with a class of .spark-menu__list-links should be wrapped around the .spark-menu__list-link element. Additionally, a second <a> tag with a class of .spark-menu__list-expand should be added.

Adding a class of .active to a list item will cause it to become highlighted. If the active item is part of a nested list, any parent items should have a class of .has-active-child. This will add styling to denote that a sub-item is active. Toggling a class of .open on a list item with a nested list will show/hide the nested list.

The menu component requires accompanying Javascript. Instantiate it using new Spark.Menu(el) or $(el).sparkMenu().

Single Level Example

<nav class="spark-menu spark-menu--panel col-xs-12 col-sm-8 col-col-md-6 col-lg-5 col-xl-4">
  <ul class="spark-menu__list">
    <li class="spark-menu__list-item">
      <a class="spark-menu__list-link">First Level A</a>
    </li>
    <li class="spark-menu__list-item active">
      <a class="spark-menu__list-link">First Level C</a>
    </li>
    <li class="spark-menu__list-item">
      <a class="spark-menu__list-link">First Level D</a>
    </li>
  </ul>
</nav>
// Vanilla JS
var el = document.querySelector('.spark-menu:not(.spark-header__menu)');
var menuInstance = new Spark.Menu(el);

// jQuery
$('.spark-menu:not(.spark-header__menu)').sparkMenu();

Two-level Example

<nav class="spark-menu spark-menu--panel col-xs-12 col-sm-8 col-md-6 col-lg-5 col-xl-4" role="menu">
  <ul class="spark-menu__list">
    <li class="spark-menu__list-item" role="menuitem">
      <a class="spark-menu__list-link" href="javascript: void(0);">First Level A</a>
    </li>
    <li class="spark-menu__list-item" role="menuitem">
      <span class="spark-menu__list-links">
        <a class="spark-menu__list-link" href="javascript: void(0);">First Level B</a>
        <a class="spark-menu__list-expand" href="javascript: void(0);" role="menuitemcheckbox" title="Expand"></a>
      </span>
      <ul class="spark-menu__list">
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level a</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level b</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level c</a>
        </li>
      </ul>
    </li>
    <li class="spark-menu__list-item active" role="menuitem">
      <a class="spark-menu__list-link" href="javascript: void(0);">First Level C</a>
    </li>
    <li class="spark-menu__list-item" role="menuitem">
      <a class="spark-menu__list-link spark-menu__list-expand" href="javascript: void(0);" role="menuitemcheckbox">First Level D</a>
      <ul class="spark-menu__list">
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level aa</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level bb</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level cc</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
// Vanilla JS
var el = document.querySelector('.spark-menu:not(.spark-header__menu)');
var menuInstance = new Spark.Menu(el);

// jQuery
$('.spark-menu:not(.spark-header__menu)').sparkMenu();

Three-level Example

<nav class="spark-menu spark-menu--panel col-xs-12 col-sm-8 col-md-6 col-lg-5 col-xl-4" role="menu">
  <ul class="spark-menu__list">
    <li class="spark-menu__list-item" role="menuitem">
      <a class="spark-menu__list-link" href="javascript: void(0);">First Level A</a>
    </li>
    <li class="spark-menu__list-item" role="menuitem">
      <span class="spark-menu__list-links">
        <a class="spark-menu__list-link" href="javascript: void(0);">First Level B</a>
        <a class="spark-menu__list-expand" href="javascript: void(0);" role="menuitemcheckbox" title="Expand"></a>
      </span>
      <ul class="spark-menu__list">
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level a</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <span class="spark-menu__list-links">
            <a class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox" href="javascript: void(0);" >Second Level b</a>
          </span>
          <ul class="spark-menu__list">
            <li class="spark-menu__list-item" role="menuitem">
              <a class="spark-menu__list-link" href="javascript: void(0);">Third-level Item I</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a class="spark-menu__list-link" href="javascript: void(0);">Third-level Item II</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a class="spark-menu__list-link" href="javascript: void(0);">Third-level Item III</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a class="spark-menu__list-link" href="javascript: void(0);">Third-level Item IV</a>
            </li>
          </ul>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level c</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level d</a>
        </li>
      </ul>
    </li>
    <li class="spark-menu__list-item active" role="menuitem">
      <a class="spark-menu__list-link" href="javascript: void(0);">First Level C</a>
    </li>
    <li class="spark-menu__list-item" role="menuitem">
      <a class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox" href="javascript: void(0);" >First Level D</a>
      <ul class="spark-menu__list">
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level aa</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level bb</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level cc</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
// Vanilla JS
var el = document.querySelector('.spark-menu:not(.spark-header__menu)');
var menuInstance = new Spark.Menu(el);

// jQuery
$('.spark-menu:not(.spark-header__menu)').sparkMenu();

Group-Label Example

<nav class="spark-menu spark-menu--panel col-xs-12 col-sm-8 col-md-6 col-lg-5 col-xl-4" role="menu">
  <ul class="spark-menu__list">
    <li class="spark-menu__list-title">Group Title Alpha</li>
    <li class="spark-menu__list-item" role="menuitem">
      <a class="spark-menu__list-link" href="javascript: void(0);">First Level A</a>
    </li>
    <li class="spark-menu__list-item" role="menuitem">
      <span class="spark-menu__list-links">
        <a class="spark-menu__list-link" href="javascript: void(0);">First Level B</a>
        <a class="spark-menu__list-expand" href="javascript: void(0);" role="menuitemcheckbox" title="Expand"></a>
      </span>
      <ul class="spark-menu__list">
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level a</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <span class="spark-menu__list-links">
            <a class="spark-menu__list-link spark-menu__list-expand" href="javascript: void(0);" role="menuitemcheckbox">Second Level b</a>
          </span>
          <ul class="spark-menu__list">
            <li class="spark-menu__list-item" role="menuitem">
              <a class="spark-menu__list-link" href="javascript: void(0);">Third-level Item I</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a class="spark-menu__list-link" href="javascript: void(0);">Third-level Item II</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a class="spark-menu__list-link" href="javascript: void(0);">Third-level Item III</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a class="spark-menu__list-link" href="javascript: void(0);">Third-level Item IV</a>
            </li>
          </ul>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level c</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level d</a>
        </li>
      </ul>
    </li>
    <li class="spark-menu__list-title">Group Title Beta</li>
    <li class="spark-menu__list-item active" role="menuitem">
      <a class="spark-menu__list-link" href="javascript: void(0);">First Level C</a>
    </li>
    <li class="spark-menu__list-item" role="menuitem">
      <a class="spark-menu__list-link spark-menu__list-expand" href="javascript: void(0);" role="menuitemcheckbox">First Level D</a>
      <ul class="spark-menu__list">
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level aa</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level bb</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="javascript: void(0);">Second Level cc</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
// Vanilla JS
var el = document.querySelector('.spark-menu:not(.spark-header__menu)');
var menuInstance = new Spark.Menu(el);

// jQuery
$('.spark-menu:not(.spark-header__menu)').sparkMenu();

Intra-Page Example

<nav class="spark-menu spark-menu--panel col-xs-12 col-sm-8 col-md-6 col-lg-5 col-xl-4" role="menu">
  <ul class="spark-menu__list">
    <li class="spark-menu__list-item" role="menuitem">
      <a class="spark-menu__list-link" href="javascript: void(0);">First Level A</a>
    </li>
    <li class="spark-menu__list-item" role="menuitem">
      <span class="spark-menu__list-links">
        <a class="spark-menu__list-link" href="javascript: void(0);">First Level B</a>
        <a class="spark-menu__list-expand" href="javascript: void(0);" role="menuitemcheckbox" title="Expand"></a>
      </span>
      <ul class="spark-menu__list">
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link spark-menu__list-link--in-page" href="javascript: void(0);">(Intra-Page) Second Level a</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link spark-menu__list-link--in-page" href="javascript: void(0);">Second Level b</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link spark-menu__list-link--in-page" href="javascript: void(0);">(Intra-Page) Second Level c</a>
        </li>
      </ul>
    </li>
    <li class="spark-menu__list-item active" role="menuitem">
      <a class="spark-menu__list-link spark-menu__list-link--in-page" href="javascript: void(0);">(Intra-Page) First Level C</a>
    </li>
    <li class="spark-menu__list-item" role="menuitem">
      <a class="spark-menu__list-link spark-menu__list-expand" href="javascript: void(0);" role="menuitemcheckbox">First Level D</a>
      <ul class="spark-menu__list">
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link spark-menu__list-link--in-page" href="javascript: void(0);">(Intra-Page) Second Level aa</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link spark-menu__list-link--in-page" href="javascript: void(0);">(Intra-Page) Second Level bb</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link spark-menu__list-link--in-page" href="javascript: void(0);">(Intra-Page) Second Level cc</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
// Vanilla JS
var el = document.querySelector('.spark-menu:not(.spark-header__menu)');
var menuInstance = new Spark.Menu(el);

// jQuery
$('.spark-menu:not(.spark-header__menu)').sparkMenu();