Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save andrewconnell/9068689 to your computer and use it in GitHub Desktop.
Save andrewconnell/9068689 to your computer and use it in GitHub Desktop.
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 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 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 class="static">
<a href="#" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">link 2</a>
<h1 id="pageTitle" class="ms-core-pageTitle">
<span>Page Title</span>
Copy link

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

Copy link

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:

should have been:

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