Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
HTML template of the header for used to create a SharePoint 2013 Hosted App (SPH) Single Page App (SPA).
<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>

Thanks Andrew. By the way your PluralSight SharePoint AngularJS tutorial rocks.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment