Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.9)

Note

This page is archived under version 1.9 and is available for reference purposes only. The latest version of Pattern Library is 2.

CPS header

The CPS version of the header may only be used on the CPS website.

Header with search and mega navigation menu

Read more details about the search pattern and the mega navigation menu pattern

Code


<script src="jquery-2.2.4.min.js"></script>
<!-- Include individual JavaScript components from Bootstrap 4.1.1 -->
<script src="bootstrap/4.1.1/util.js"></script>
<script src="bootstrap/4.1.1/modal.js"></script>
<!-- Or include the full Bootstrap JavaScript but do not include both -->
<script src="bootstrap/4.1.1/bootstrap.js"></script>
<script type="text/javascript">var searchModalId = "<?=  ?>";</script>
<script src="coc.nav.js"></script>
<script>
	$( document ).ready(function() {
		COC.Nav.init();		
		const mainContent = document.getElementById('{{ Main container id }}')
	});
</script>


<header class="cui coc-header cps-header">
	<div class="header-inner">
		<!-- Skip links provide screen readers and keyboard users a shortcut to the main content area -->
		<ul class="skip-links">
			<li><button onclick="window.location.href = '#{{ Main container id }};" class="skip-link" id="skip-main-content">Skip to main content</button></li>
			<li><button onclick="window.location.href = '#search-field';" class="skip-link d-none d-sm-block" id="skip-search-bar">Skip to search</button></li>
			<li><button onclick="window.location.href = '#search-field-modal';" class="skip-link d-block d-sm-none" id="skip-search-bar-mobile" data-toggle="modal" data-target="#modal-search" aria-label="Click to open the search window">Skip to Search</button></li>
		</ul>

		<!-- Logo -->
		<a href="{{ Home page URL }}" class="coc-logo">
			<img src="../img/CPS-logo.svg" alt="Return to the Calgary Police Service homepage">
		</a>

		<!-- Mobile-UX-optimized Search Part 1. Real search box, hidden for xxs screens -->
		<div class="cui search-box d-none d-sm-block">
			<label for="search-field" class="sr-only">Search</label>
			<input id="search-field" class="form-control search-box-input" type="search">
			<button class="cui search-box-btn btn-md icon-only primary">
				<span class="cicon-search" aria-hidden="true"></span>
				<span class="sr-only">Submit search</span>
			</button>
		</div>

		<!-- Mobile-UX-optimized Search Part 2. Faux search box, clicking this will open up the modal, only visible for xxs screens -->
		<button class="cui search-box d-block d-sm-none" data-toggle="modal" data-target="#modal-search" aria-label="Click to open the search window">
			<span class="form-control search-box-input"></span>
			<span class="cui search-box-btn btn-md icon-only primary">
				<span class="cicon-search" aria-hidden="true"></span>
				<span class="sr-only">Submit search</span>
			</span>
		</button>

		<!-- Mega navigation menu button (for mobile) -->
		<button class="cui nav-mega-btn-open" aria-haspopup="true" aria-expanded="false" aria-label="Open menu" aria-controls="nav-mega">
			<span class="cicon-bars" aria-hidden="true"></span>
		</button>
	</div>

	<!-- Mega navigation menu -->
	<nav id="nav-mega" class="cui nav-mega">
		<button type="button" class="cui nav-mega-btn-close" aria-expanded="false" aria-label="Close menu" aria-controls="nav-mega">
			Close<span class="cicon-close-thin-large" aria-hidden="true"></span>
		</button>
		<!-- Simplified for brevity -->
		<ul class="nav-menu">
			<!-- Basic menu item -->
			<li class="nav-item">
				<a href="{{ URL }}">{{ Menu item name }}</a>
			</li>
			<li class="nav-item">
				<a href="{{ URL }}">{{ Menu item name }}</a>
			</li>
			...
		</ul><!-- End of .nav-menu -->
	</nav>

	<!-- Mobile-UX-optimized Search Part 3. Modal, activated by the mobile faux search box.
	Must be placed outside of the <header> -->
	<div id="modal-search" class="cui modal" tabindex="-1" role="dialog" aria-labelledby="modal-search-title" aria-hidden="true">
		<div class="modal-dialog modal-fs-mobile" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h2 id="modal-search-title" class="modal-title">Search</h2>
					<button type="button" class="btn-modal-close cui btn-md primary-text" data-dismiss="modal">Close</button>
				</div>
				<div class="modal-body">
					<div class="cui search-box">
						<label for="search-field-modal" class="sr-only">Search</label>
						<input id="search-field-modal" class="form-control search-box-input" type="search">
						<button class="cui search-box-btn btn-md icon-only primary">
							<span class="cicon-search" aria-hidden="true"></span>
							<span class="sr-only">Submit search</span>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</header>