HTML template of the header for used to create a SharePoint 2013 Hosted App (SPH) Single Page App (SPA).

SharePoint 2013 SPA UX Template - Header

<div id="s4-titlerow" class="ms-dialogHidden" style="display:block;">
  <div id="titleAreaBox" class="ms-noList ms-table ms-core-tableNoSpace">
    <div id="titleAreaRow" class="ms-tableRow">
      <div id="siteIcon" class="ms-tableCell ms-verticalAlignTop" style="width:180px;">
        app logo goes here
      </div>
      <div class="ms-breadcrumb-box ms-tableCell ms-verticalAlignTop">
        <div class="ms-breadcrumb-top">
          <div class="ms-breadcrumb-dropdownBox" style="display:none;">
            <span id="DeltaBreadcrumbDropdown"></span>
          </div>
          <div class="ms-displayInline ms-core-navigation">
            <div class="noindex ms-core-listMenu-horizontalBox">
              <ul class="root ms-core-listMenu-root static">
                <li class="static selected">
                  <a href="#" class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode">selected link 1</a>
                </li>
                <li class="static">
                  <a href="#" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">link 2</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <h1 id="pageTitle" class="ms-core-pageTitle">
          <span>Page Title</span>
        </h1>
      </div>
    </div>
  </div>
</div>

Hi Andrew,
Awesome tutorial, just a minor issue; for the quick launch, it appears you have the link pointing to the header Gist.
Video shows:
http://aconn.me/1eYEtvc

should have been:
http://aconn.me/1ebaWhR