Navigation bar

Digital pattern library

The navigation bar pattern displays a horizontal navigation menu for pages related to the current page.

Rules for the navigation bar

Must be present on all webpages, apart from long-form stories.
Must come below the category header and above the main body of the page.
Must not contain any dropdown menus.
Must only contain links to other webpages or web applications.
Should not contain more than eight links.

Primary navigation

The primary navigation menu is required on all homepages and must use the primary palette colour.

Code

<!-- 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>
<!-- End pattern: navigation-bar //-->

Primary and secondary navigation

The secondary navigation bar is required on all webpages apart from a homepage and must use the secondary palette colour.

Code

<!-- 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>
<!-- End pattern: navigation-bar //-->