Page Header

The page header consists of breadcrumb navigation and an <h1> heading tag wrapped in a <header> element.

Student Resources

<header>
  <nav>
    <ol class="cmp-breadcrumbs">
      <li class="cmp-breadcrumbs__item">
        <a class="cmp-breadcrumbs__link" data-title="Home" href="#">Home</a>
      </li>
      <li class="cmp-breadcrumbs__item">
        <a class="cmp-breadcrumbs__link" data-title="Resources" href="#">
          Resources
        </a>
      </li>
      <li class="cmp-breadcrumbs__item cmp-breadcrumbs__item--current">
        <a
          class="cmp-breadcrumbs__link"
          data-title="Student Resources"
          href="#"
          aria-current="page"
        >
          Student Resources
        </a>
      </li>
    </ol>
  </nav>
  <h1
    class="cmp-heading-1 util-margin-top-lg util-margin-top-none@print util-margin-bottom-lg@print"
  >
    Student Resources
  </h1>
</header>

Breadcrumbs

The breadcrumbs are wrapped in a <nav> tag to maintain accessibility standards. The last item in the list should always include aria-current="page" and the cmp-breadcrumbs__item--current modifier.

<nav>
  <ol class="cmp-breadcrumbs">
    <li class="cmp-breadcrumbs__item">
      <a class="cmp-breadcrumbs__link" data-title="Home" href="#">Home</a>
    </li>
    <li class="cmp-breadcrumbs__item cmp-breadcrumbs__item--current">
      <a
        class="cmp-breadcrumbs__link"
        data-title="Faculty Resources"
        href="#"
        aria-current="page"
      >
        Faculty Resources
      </a>
    </li>
  </ol>
</nav>

CSS Classes

Class	Description
`.cmp-breadcrumbs`	Ordered list container for breadcrumb items
`.cmp-breadcrumbs__item`	Individual breadcrumb list item
`.cmp-breadcrumbs__item--current`	Modifier for the active/current page item
`.cmp-breadcrumbs__link`	Link element within each breadcrumb item

Structure

Element	Attributes / Classes	Purpose
`<header>`	—	Wraps breadcrumbs and page heading
`<nav>`	—	Landmark for breadcrumb navigation
`<ol>`	`.cmp-breadcrumbs`	Ordered breadcrumb list
`<li>`	`.cmp-breadcrumbs__item`	Each breadcrumb step
`<a>`	`.cmp-breadcrumbs__link`, `data-title`	Breadcrumb link with title data attribute
`<h1>`	`.cmp-heading-1`, spacing utilities	Page title

Accessibility

The <nav> element provides a navigation landmark for assistive technology.
The last breadcrumb link must include aria-current="page" to indicate the current page.
Each link uses data-title to store the link label.