Main Navigation

The main navigation is located at the top of a website.  It usually includes a logo and/or other identifying elements of an organization.

USAGE

The main navigation is positioned at the top of every webpage.  The main navigation will include the branding/logo, company's name and menu options. 

EXAMPLE

Site Header
<div class="container ng-scope" id="site-nav" ng-if="search.showMenuOnSearch" style="display:none">
<ul class="nav nav-justified">
	<li class="menu-item" id="sitenav-1" ng-class="{ active: (nav.focusedTree == 'sitenav-1') }"><a class="clearfix" hover-intent="::nav.focus('sitenav-1')" hover-intent-delay="100" href="/admissions-financial-aid" ng-keydown="$event.keyCode == 9 &amp;&amp; !$event.shiftKey &amp;&amp; nav.focus('sitenav-1', 1)"><strong>Admissions</strong></a></li>
	<li class="menu-item" id="sitenav-5" ng-class="{ active: (nav.focusedTree == 'sitenav-5') }"><a class="clearfix" hover-intent="::nav.focus('sitenav-5')" hover-intent-delay="100" href="/about" ng-keydown="$event.keyCode == 9 &amp;&amp; !$event.shiftKey &amp;&amp; nav.focus('sitenav-5', 1)"><strong>About</strong></a></li>
	<li class="menu-item" id="sitenav-6" ng-class="{ active: (nav.focusedTree == 'sitenav-6') }"><a class="clearfix" hover-intent="::nav.focus('sitenav-6')" hover-intent-delay="100" href="/news-events" ng-keydown="$event.keyCode == 9 &amp;&amp; !$event.shiftKey &amp;&amp; nav.focus('sitenav-6', 1)"><strong>News &amp; Events</strong></a></li>
	<li class="menu-item" id="sitenav-4" ng-class="{ active: (nav.focusedTree == 'sitenav-4') }"><a class="clearfix" hover-intent="::nav.focus('sitenav-4')" hover-intent-delay="100" href="/about/giving" ng-keydown="$event.keyCode == 9 &amp;&amp; !$event.shiftKey &amp;&amp; nav.focus('sitenav-4', 1)"><strong>Giving</strong></a></li>
</ul>
</div>

<div class="nojs-hide" id="site-nav-second" ng-style="{ 'top': nav.secondOffset }" style="top: 0px;">
<div aria-hidden="true" class="menu-second angular-animate ng-trans ng-trans-fade-up ng-hide" id="sitenav-1-second" ng-show="nav.focusedTree == 'sitenav-1'" style="">
<div class="container">
<ul class="menu">
	<li class="menu-item"><a data-drupal-link-system-path="node/609" href="/admissions/graduate">Graduate</a></li>
	<li class="menu-item"><a data-drupal-link-system-path="node/306" href="/admissions/undergraduate">Undergraduate</a></li>
	<li class="menu-item"><a data-drupal-link-system-path="node/307" href="/admissions/international-transfer-special-circumstance">International, Transfer &amp; Special Circumstance Students</a></li>
</ul>
</div>
</div>

<div aria-hidden="true" class="menu-second angular-animate ng-trans ng-trans-fade-up ng-hide" id="sitenav-4-second" ng-show="nav.focusedTree == 'sitenav-4'" style="">
<div class="container">
<ul class="menu">
	<li class="menu-item"><a data-drupal-link-system-path="node/383" href="/about/office-development/why-give">Giving Opportunities</a></li>
	<li class="menu-item"><a data-drupal-link-system-path="node/824" href="/about/office-development/support-next-generation-artists-matching-program">Matching Program</a></li>
</ul>
</div>
</div>
</div>