Task Panels

CSS file | JS file

Task panels are interactive menus that contain bulk actions for a container. The panels are revealed by clicking the three-dot icon. In order for them to function properly, the toggle button must have an aria-controls value that corresponds to the id of a task-panel-content.

<div class="sba-c-task-panel">
  <button type="button" class="sba-c-button sba-c-button--transparent sba-c-task-panel__toggle" aria-expanded="false" aria-controls="panel1">
    <svg aria-hidden="true" class="sba-c-icon sba-c-icon--lg">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#ellipsis-h"></use>
    </svg>
    <span class="sba-u-visibility--screen-reader">Toggle menu</span>
  </button>
  <div id="panel1" class="sba-c-task-panel__content">
    <ul class="sba-c-task-panel__menu">
      <li class="sba-c-task-panel__menu__item">
        <a href="#" class="sba-c-task-panel__menu__link">Do some action</a>
      </li>
      <li class="sba-c-task-panel__menu__item">
        <a href="#" class="sba-c-task-panel__menu__link sba-c-task-panel__menu__link--emergency">Delete</a>
      </li>
    </ul>
  </div>
</div>

<div class="sba-c-task-panel">
  <button type="button" class="sba-c-button sba-c-button--transparent sba-c-task-panel__toggle" aria-expanded="false" aria-controls="panel2">
    <svg aria-hidden="true" class="sba-c-icon sba-c-icon--lg">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#ellipsis-h"></use>
    </svg>
    <span class="sba-u-visibility--screen-reader">Toggle menu</span>
  </button>
  <div id="panel2" class="sba-c-task-panel__content">
    <ul class="sba-c-task-panel__menu">
      <li class="sba-c-task-panel__menu__item">
        <a href="#" class="sba-c-task-panel__menu__link">Do some action</a>
      </li>
      <li class="sba-c-task-panel__menu__item">
        <a href="#" class="sba-c-task-panel__menu__link">Do some action</a>
      </li>
      <li class="sba-c-task-panel__menu__item">
        <a href="#" class="sba-c-task-panel__menu__link">Do some action</a>
      </li>
      <li class="sba-c-task-panel__menu__item">
        <a href="#" class="sba-c-task-panel__menu__link">Do some action</a>
      </li>
    </ul>
    <hr>
    <ul class="sba-c-task-panel__menu">
      <li class="sba-c-task-panel__menu__item">
        <a href="#" class="sba-c-task-panel__menu__link sba-c-task-panel__menu__link--emergency">Delete</a>
      </li>
    </ul>
  </div>
</div>

Guidance

Because task panel menus open to the left of their buttons, they should be placed on the right hand side of their parent container to prevent content from being cut off by the browser.

Required components

  • Toggle button
  • Panel
  • Menu

Optional components

  • Emergency actions

    Emergency actions are red links that involve actions such as closing or deleting.

  • Horizontal rules

    If a menu has more than 3 items, and one of those items is an "emergency action," then the two menus should be used separated by a horizontal rule.

Task panes with tabs

Tabs are permissible inside of a task panel.

Variations

There are variations on the toggle button available that can be applied using class names on the toggle button.

Vertical dots

The dots can be rotated vertically to save horizontal space, such as when the task panel is used on cards. This is done by adding a class name of sba-c-task-panel__toggle--vertical to the toggle

<div class="sba-c-task-panel">
  <button type="button" class="sba-c-button sba-c-button--transparent sba-c-task-panel__toggle" aria-expanded="false" aria-controls="panel3">
    <svg aria-hidden="true" class="sba-c-icon sba-c-icon--lg">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#ellipsis-v"></use>
    </svg>
    <span class="sba-u-visibility--screen-reader">Toggle menu</span>
  </button>
  <div id="panel3" class="sba-c-task-panel__content">
    <ul class="sba-c-task-panel__menu">
      <li class="sba-c-task-panel__menu__item">
        <a href="#" class="sba-c-task-panel__menu__link">Do some action</a>
      </li>
      <li class="sba-c-task-panel__menu__item">
        <a href="#" class="sba-c-task-panel__menu__link sba-c-task-panel__menu__link--emergency">Delete</a>
      </li>
    </ul>
  </div>
</div>

Smaller buttons

Buttons can be made smaller to conserve space, such as when the task panel is used in cards and tables. This is done by adding a class name of sba-c-task-panel__toggle--small to the toggle