University of St Andrews

Navigation bar

The navigation bar pattern displays a primary horizonal and optional secondary navigation.

Each menu should contains 5 to 8 links.

Primary only navigation

<!-- Begin pattern: navigation-bar //-->


<nav class="navigation-bar" role="navigation">
	<div class="container">
		<div class="toggle-navigation primary-toggle">
			<a class="navigation-button">Navigation <i class="chevron left"></i></a>
		</div>
		<ul class="navigation-bar-nav primary-nav">
				<li>
						<span class="currentbranch0">
					<a href="#">Undergraduate</a>
						</span>
				</li>
				<li>
					<a href="#">Postgraduate</a>
				</li>
				<li>
					<a href="#">Non-degree courses</a>
				</li>
				<li>
					<a href="#">Study abroad</a>
				</li>
				<li>
					<a href="#">International</a>
				</li>
				<li>
					<a href="#">Access and outreach</a>
				</li>
				<li>
					<a href="#">Courses</a>
				</li>
		</ul>
	</div>
</nav>




<a name="content-begin"></a>

<!-- End pattern: navigation-bar //-->

Primary and expanded secondary navigation

Secondary navigation is achieved by using the same pattern for primary, but adding a secondary class to the main element.

<!-- Begin pattern: navigation-bar //-->


<nav class="navigation-bar" role="navigation">
	<div class="container">
		<div class="toggle-navigation primary-toggle">
			<a class="navigation-button">Navigation <i class="chevron left"></i></a>
		</div>
		<ul class="navigation-bar-nav primary-nav">
				<li>
						<span class="currentbranch0">
					<a href="#">Undergraduate</a>
						</span>
				</li>
				<li>
					<a href="#">Postgraduate</a>
				</li>
				<li>
					<a href="#">Non-degree courses</a>
				</li>
				<li>
					<a href="#">Study abroad</a>
				</li>
				<li>
					<a href="#">International</a>
				</li>
				<li>
					<a href="#">Access and outreach</a>
				</li>
				<li>
					<a href="#">Courses</a>
				</li>
		</ul>
	</div>
</nav>

	<nav class="navigation-bar subnav" role="navigation">
		<div class="container">
			<div class="toggle-navigation secondary-toggle">
				<a class="navigation-button">Section navigation <i class="chevron left"></i></a>
			</div>
			<ul class="navigation-bar-nav secondary-nav">
					<li>
						<a href="#">Study options</a>
					</li>
					<li>
						<a href="#">Why St&nbsp;Andrews?</a>
					</li>
					<li>
						<a href="#">Fees and funding</a>
					</li>
					<li>
						<a href="#">Accommodation</a>
					</li>
					<li>
						<a href="#">Your future</a>
					</li>
					<li>
						<a href="#">Meet us</a>
					</li>
					<li>
						<a href="#">How to apply</a>
					</li>
			</ul>
		</div>
	</nav>



<a name="content-begin"></a>

<!-- End pattern: navigation-bar //-->

Primary only navigation (study blue)

<!-- Begin pattern: navigation-bar //-->
 <div class="accent-blue-study"> 

<nav class="navigation-bar" role="navigation">
	<div class="container">
		<div class="toggle-navigation primary-toggle">
			<a class="navigation-button">Navigation <i class="chevron left"></i></a>
		</div>
		<ul class="navigation-bar-nav primary-nav">
				<li>
						<span class="currentbranch0">
					<a href="#">Undergraduate</a>
						</span>
				</li>
				<li>
					<a href="#">Postgraduate</a>
				</li>
				<li>
					<a href="#">Non-degree courses</a>
				</li>
				<li>
					<a href="#">Study abroad</a>
				</li>
				<li>
					<a href="#">International</a>
				</li>
				<li>
					<a href="#">Access and outreach</a>
				</li>
				<li>
					<a href="#">Courses</a>
				</li>
		</ul>
	</div>
</nav>



 </div> 
<a name="content-begin"></a>

<!-- End pattern: navigation-bar //-->

Primary and expanded secondary navigation (study blue)

Secondary navigation is achieved by using the same pattern for primary, but adding a secondary class to the main element.

<!-- Begin pattern: navigation-bar //-->
 <div class="accent-blue-study"> 

<nav class="navigation-bar" role="navigation">
	<div class="container">
		<div class="toggle-navigation primary-toggle">
			<a class="navigation-button">Navigation <i class="chevron left"></i></a>
		</div>
		<ul class="navigation-bar-nav primary-nav">
				<li>
						<span class="currentbranch0">
					<a href="#">Undergraduate</a>
						</span>
				</li>
				<li>
					<a href="#">Postgraduate</a>
				</li>
				<li>
					<a href="#">Non-degree courses</a>
				</li>
				<li>
					<a href="#">Study abroad</a>
				</li>
				<li>
					<a href="#">International</a>
				</li>
				<li>
					<a href="#">Access and outreach</a>
				</li>
				<li>
					<a href="#">Courses</a>
				</li>
		</ul>
	</div>
</nav>

	<nav class="navigation-bar subnav" role="navigation">
		<div class="container">
			<div class="toggle-navigation secondary-toggle">
				<a class="navigation-button">Section navigation <i class="chevron left"></i></a>
			</div>
			<ul class="navigation-bar-nav secondary-nav">
					<li>
						<a href="#">Study options</a>
					</li>
					<li>
						<a href="#">Why St&nbsp;Andrews?</a>
					</li>
					<li>
						<a href="#">Fees and funding</a>
					</li>
					<li>
						<a href="#">Accommodation</a>
					</li>
					<li>
						<a href="#">Your future</a>
					</li>
					<li>
						<a href="#">Meet us</a>
					</li>
					<li>
						<a href="#">How to apply</a>
					</li>
			</ul>
		</div>
	</nav>


 </div> 
<a name="content-begin"></a>

<!-- End pattern: navigation-bar //-->