Navigation

These components are located near the top of views and help orient customers when they arrive to new pages.

Header

Global Header
<header class="header header--global">
  <a class="header__logo">
    <svg aria-label="UserTesting Logo" class="logo--u mh-4x">
      <use xlink:href="#logo-u"></use>
    </svg>
  </a>
  Global Header
</header>

Description

Header is used to anchor each view in the product. It is consistent across all views to present a familiar pattern no matter which view you are on.

Employee (Internal)

Internal Header
<header class="header header--global header--employee">
  <a class="header__logo">
    <svg aria-label="UserTesting Logo" class="logo--u mh-4x">
      <use xlink:href="#logo-u"></use>
    </svg>
  </a>
  Internal Header
</header>

Description

Our coworkers are sometimes tasked with assisting customers with their research. The internal pattern helps indicate to our team that they are in a customer’s environment.

Do

  • Account and team information is clearly visible
  • Actions within the header are clickable

Don't

  • Add additional content to the header

Site Subheader

<div class="site-subheader">
  <div class="site-subheader__wrapper">
    <div class="drop-menu">
      <button aria-haspopup="true" class="dropdown dropdown--alt" type="button">
        <span class="dropdown__trigger">
        Workspace
        </span>
      </button>
    </div>
  </div>
</div>

Description

The subheader always appears under the header. It’s a grouping that links to similar pages. This allows the customer easy access to a variety of pages. Subheaders can also contain components like buttons and search.

Do

  • Have one primary call-to-action in the subheader at a time

Don't

  • Have two tabs active at the same time
  • Change titles of pages between views
  • Have more than 10 items in a subheader

Breadcrumbs

<nav role="navigation" class="nav">
  <ul class="breadcrumbs">
    <li class="breadcrumbs__item">
      <a href="#" class="breadcrumbs__link">
        <svg class="icon icon--small ml-0x" role="presentation">
          <use xlink:href="#icon-home"></use>
        </svg>
      </a>
    </li>
    <li class="breadcrumbs__item">
      <a href="#" class="breadcrumbs__link">
        Link
      </a>
    </li>
    <li class="breadcrumbs__item">
      <a href="#" class="breadcrumbs__link">
        Link
      </a>
    </li>
    <li class="breadcrumbs__item">
      <a href="#" class="breadcrumbs__link">
        Link
      </a>
    </li>
  </ul>
</nav>

Description

Breadcrumbs are a collection of links used to navigate between pages. They help orient a customer on where they are in UserTesting. We use the home icon to represent dashboard.

Do

  • Always have the home icon to the left of the breadcrumb unless when the content reads right-to-left
  • Always have the home point to the root origin of the page you are viewing. In the video player, that’s the single study view. In the single study view that’s the dashboard.