Page Header

Pages that don't include the Mega menu use the Page Header instead.

Requirements

Breadcrumbs and Local Nav are required for the Page Header to render properly.

Your code should look something like this.

<div class="uomcontent">
  <div class="page-inner">
    <ol class="page-local-history" itemscope="" itemtype="http://schema.org/BreadcrumbList">...</ol>
    <div role="main" id="main-content">...</div>
  </div>
  <div id="sitemap" role="navigation">...</div>
</div>

Breadcrumbs

All content inside page-local-history is automatically injected it into the header.

<ol
  class="page-local-history"
  itemscope=""
  itemtype="http://schema.org/BreadcrumbList"
>
  <li
    class="root"
    itemprop="itemListElement"
    itemscope=""
    itemtype="http://schema.org/ListItem"
  >
    <a href="#" title="Website Home" itemprop="item">
      <span itemprop="name">Website Home</span>
    </a>
    <meta content="1" itemprop="position" />
  </li>
  <li
    itemprop="itemListElement"
    itemscope=""
    itemtype="http://schema.org/ListItem"
  >
    <a href="#" itemprop="item" title="Layouts">
      <span itemprop="name">Layouts</span>
    </a>
    <meta content="2" itemprop="position" />
  </li>
  <li
    class="last"
    itemprop="itemListElement"
    itemscope=""
    itemtype="http://schema.org/ListItem"
  >
    <a href="#" itemprop="item" title="Source">
      <span itemprop="name">Source</span>
    </a>
    <meta content="3" itemprop="position" />
  </li>
</ol>

Local Nav

All content inside the sitemap is automatically injected into the hamburger menu.

<div id="sitemap" role="navigation">
  <h2>Section title</h2>
  <ul>
    <li>
      <a href="#">Link to another page</a>
    </li>
    <li>
      <a href="#">Sub-section</a>
      <div class="inner">
        <ul>
          <li>
            <a href="#">A page in the sub-section</a>
          </li>
          <li>
            <a href="#">Another page</a>
            <div class="inner">
              <ul>
                <li>
                  <a href="#">3rd level</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </li>
    <li><a href="#">Last one</a></li>
  </ul>
  <ul class="meta">
    <li>
      <a href="#">A small link at the bottom</a>
    </li>
  </ul>
</div>