Skip Navigation

Panel Menu

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

Available in React

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.

Examples

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.

Examples

Two-level Example


Three-level Example


Group-Label Example


Intra-Page Example


Panel Menu in Panel Example

When nesting an Panel Menu in a Panel you may replace the box-shadow with a single stroke to denote the content area, while also preserving the visual hierarchy.


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. If the Panel Menu component is nested within a Panel component, you may add the class spark-nested to the spark-menu element to replace the box-shadow with a border.

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. The following options may be passed when using new Spark.Menu(el, {});:

Name Type Default Description
onToggle function null A callback function run when the open/close toggle button is clicked.
onKeydown function null A callback function run when a key is pressed. Primarily used in the Header component to manage keyboard navigation when the Hamburger menu is expanded.

For all available methods and full API, refer to the component code on Bitbucket.

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);

Two-level Example

<nav aria-label="Two Level Menu Title" 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="#">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="#">First Level B</a>
        <a class="spark-menu__list-expand" href="#" role="menuitemcheckbox" aria-label="Expand" aria-checked="false"></a>
      </span>
      <ul class="spark-menu__list">
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="#">Second Level a</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="#">Second Level b</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="#">Second Level c</a>
        </li>
      </ul>
    </li>
    <li class="spark-menu__list-item active" role="menuitem">
      <a class="spark-menu__list-link" href="#">First Level C</a>
    </li>
    <li class="spark-menu__list-item" role="menuitem">
      <a class="spark-menu__list-link spark-menu__list-expand" href="#" 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="#">Second Level aa</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="#">Second Level bb</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="#">Second Level cc</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-menu:not(.spark-header__menu)');
var menuInstance = new Spark.Menu(el);

Three-level Example

<nav aria-label="Three Level Menu Title" 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="#">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="#">First Level B</a>
        <a class="spark-menu__list-expand" href="#" role="menuitemcheckbox" aria-label="Expand" aria-checked="false"></a>
      </span>
      <ul class="spark-menu__list">
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="#">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="#" 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="#">Third-level Item I</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a class="spark-menu__list-link" href="#">Third-level Item II</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a class="spark-menu__list-link" href="#">Third-level Item III</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a class="spark-menu__list-link" href="#">Third-level Item IV</a>
            </li>
          </ul>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="#">Second Level c</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="#">Second Level d</a>
        </li>
      </ul>
    </li>
    <li class="spark-menu__list-item active" role="menuitem">
      <a class="spark-menu__list-link" href="#">First Level C</a>
    </li>
    <li class="spark-menu__list-item" role="menuitem">
      <a class="spark-menu__list-link spark-menu__list-expand" href="#" 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="#">Second Level aa</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="#">Second Level bb</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="#">Second Level cc</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-menu:not(.spark-header__menu)');
var menuInstance = new Spark.Menu(el);

Group-Label Example

<nav aria-label="Group Label Menu Title" 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="#">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="#">First Level B</a>
        <a class="spark-menu__list-expand" href="#" role="menuitemcheckbox" aria-checked="false" aria-label="Expand"></a>
      </span>
      <ul class="spark-menu__list">
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="#">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="#" 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="#">Third-level Item I</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a class="spark-menu__list-link" href="#">Third-level Item II</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a class="spark-menu__list-link" href="#">Third-level Item III</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a class="spark-menu__list-link" href="#">Third-level Item IV</a>
            </li>
          </ul>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="#">Second Level c</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="#">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="#">First Level C</a>
    </li>
    <li class="spark-menu__list-item" role="menuitem">
      <a class="spark-menu__list-link spark-menu__list-expand" href="#" 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="#">Second Level aa</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="#">Second Level bb</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a class="spark-menu__list-link" href="#">Second Level cc</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-menu:not(.spark-header__menu)');
var menuInstance = new Spark.Menu(el);

Intra-Page Example

<nav aria-label="Intra Page Menu Title" 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="#">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="#">First Level B</a>
        <a class="spark-menu__list-expand" href="#" role="menuitemcheckbox" aria-label="Expand" aria-checked="false"></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="#">(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="#">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="#">(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="#">(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="#" 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="#">(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="#">(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="#">(Intra-Page) Second Level cc</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

<style type="text/css">
  
</style>
// Vanilla JS
var el = document.querySelector('.spark-menu:not(.spark-header__menu)');
var menuInstance = new Spark.Menu(el);

Accessibility Notes

When using multiple Panel Menus or <nav> on a single page, it is important to distinguish each navigation menu from another for the benefit of assistive devices. This can be achieved by adding an aria-label attribute to the <nav> element.

<nav aria-label="Two Level Menu Title" class="spark-menu spark-menu--panel col-xs-12 col-sm-8 col-md-6 col-lg-5 col-xl-4" role="menu">
  ...
</nav>

A scenario that illustrates the recommendation above is the combination of primary navigation within the Header of your application and a Panel Menu contained in a sidebar that links to different anchor points within the current page.

Nested Menu States

The ability to nest menus is a feature of the Panel Menu, and there are two possible ways of approaching this depending on your needs. With the first approach, illustrated in code below, the element with the .spark-menu__list-expand class is used to expand/collapse the menu nested underneath it. Note that this element is an <a> tag that has text provided.

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

The second approach to nesting menus is similar to the first, but the key difference is the placement of the .spark-menu__list-expand class. As shown below, the element with this class is separated from the element that contains text i.e. there are two <a> tags utilized, the first of which contains the navigation text and the other containing the up/down caret that indicates whether the menu is expanded or collapsed.

Other key differences between the two approaches are that the latter implements a divider to the left of the caret, and the caret can be reached via the tab key.

<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" aria-label="Expand" aria-checked="false"></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>

If utilizing this approach, provide an aria-label to the .spark-menu__list-expand element to provide a label for assistive devices as the contents of the element are generated content using CSS :before and :after elements. Additionally, provide an aria-checked attribute set to false if the menu is collapsed in its initial state. If the menu is expanded in its initial state, ensure that the attribute is set to true and that an additional .open class is added to the parent .spark-menu__list-item element. Javascript will then be used to toggle the aria-checked attributes based on whether a user has expanded or collapsed the menu.