Primary Nav
HTML
<div class="main-site-nav-wrap">
<div class="container">
<div class="row">
<div class="col-md-9 col-xs-11 col-xs-push-1 col-md-push-0 main-site-nav-cols">
<div class="main-site-nav">
<ul class="hide-accessible-mobile-960">
<li class="first"><a href="/" title="Home" class="active">Home</a></li>
<li class=""><a href="/news" title="">News</a></li>
<li class=""><a href="/events/home">Events</a></li>
<li class="expanded"><a href="/services/catalog/a-z/all" title="">Services<span class="open-sub" role="button" tabindex="0" aria-label="Show sub navigation"><em class="sbuicon-menu7"></em></span></a>
<ul class="hide-accessible-mobile-960">
<li class="first"><a href="/services/catalog/a-z/all" title="">Services A-Z</a></li>
<li class=""><a href="/services/catalog/category" title="">Services By Category</a></li>
<li class=""><a href="/status" title="">System Status</a></li>
<li class="last"><a href="/services/it-guides">IT Guides</a></li>
</ul>
</li>
<li class=""><a href="/about-us">CIO</a></li>
<li class=""><a href="/projects" title="">Projects</a></li>
<li class="last"><a href="/help">Help</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
Unity Navbar
HTML
<nav class="unity-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="unity-navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="unity-nav-icon-bar"></span>
<span class="unity-nav-icon-bar"></span>
<span class="unity-nav-icon-bar"></span>
</button>
</div>
<div id="navbar" class="unity-navbar-collapse collapse">
<ul class="unity-navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#about">Events</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
<ul class="unity-navbar-dropdown-menu">
<li><a href="#">Services A-Z</a></li>
<li><a href="#">Services by Category</a></li>
<li><a href="#">System Status</a></li>
<li><a href="#">System Status</a></li>
</ul>
</li>
<li><a href="#contact">Projects</a></li>
<li><a href="#contact">Help</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Footer Nav
Lorem ipsum dolor sit (37 characters)
HTML
<div class="footer-nav">
<strong>Lorem ipsum dolor sit (37 characters)</strong>
<ul><li><a href="{{url}}">Knowledge Base</a></li><li><a href="{{url}}">Submit a Ticket</a></li><li><a href="{{url}}">Training & Development</a></li></ul>
</div>
Social Links
HTML
<div class="social-links">
<h3>Connect with @SBUDoIT</h3>
<a href="#" class="social-link social-link--facebook">
<span class="sr-only">Facebook</span>
</a>
<a href="#" class="social-link social-link--twitter">
<span class="sr-only">Twitter</span>
</a>
<a href="#" class="social-link social-link--youtube">
<span class="sr-only">YouTube</span>
</a>
<a href="#" class="social-link social-link--flickr">
<span class="sr-only">Flickr</span>
</a>
<a href="#" class="social-link social-link--instagram">
<span class="sr-only">Instagram</span>
</a>
<a href="#" class="social-link social-link--yammer">
<span class="sr-only">Yammer</span>
</a>
</p>
</div>
Quick Nav
HTML
<section class="quick-nav">
<div class="container disable-container-mobile">
<div class="row no-margin-mobile">
<div class="col-md-8 pull-right">
<div class="quick-nav--container">
<ul class="horizontal-list quick-nav--list">
<li class="quick-nav--list-item"><a href="#" class="quick-nav--link">Solar</a></li>
<li class="quick-nav--list-item"><a href="#" class="quick-nav--link">Blackboard</a></li>
<li class="quick-nav--list-item hidden-xs hidden-sm"><a href="#" class="quick-nav--link">Google Apps</a></li>
<li class="quick-nav--list-item"><a href="#" class="quick-nav--link">Report Problem</a></li>
<div class="quick-nav--search-container hidden-md hidden-sm hidden-xs">
<form class="search-wrapper" action="http://stonybrook.edu/search">
<input class="quick-nav--search" type="text" id="search-form-query1" name="q" title="Search" value="" class="populate" size="30" placeholder="Search This Site">
<!-- <button name="submit" type="submit" class="btn" id="search-form-submit1" alt="Search" aria-label="search">
<span class="sbuicon-search"></span>
</button> -->
</form>
</div>
<li class="quick-nav--list-item hidden-lg"><a href="#" class="quick-nav--link">Search</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
Pagination
This follows bootstraps pagination
Would prefer a method of setting active/disabled that followed bem syntax i.e. pagination--item__active and pagination--item__disabled
HTML
<p>This follows bootstraps pagination</p>
<p>Would prefer a method of setting active/disabled that followed bem syntax i.e. pagination--item__active and pagination--item__disabled</p>
<ol class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ol>
Breadcrumbs
This is based off bootstraps breadcrumbs
HTML
<p>This is based off bootstraps breadcrumbs</p>
<ol class="breadcrumb">
<li><a href="#">Grandparent</a></li>
<li><a href="#">Parent</a></li>
<li><a href="#">Child</a></li>
<li><a href="#">Grandchild</a></li>
<li><a href="#">Great-Grandchild</a></li>
</ol>