Menus

<script src="jquery-2.2.4.min.js"></script>
<script src="coc.nav.js"></script>
<script>
	$( document ).ready(function() {
		COC.Nav.initSecondaryNav();
	});
</script>

<nav id="{{ Navigation id }}" class="cui nav-secondary">
	<button class="nav-btn-mobile" aria-controls="{{ Navigation id }}" aria-expanded="false" aria-haspopup="true">
		{{ Secondary navigation menu name }}
	</button>

	<ul class="nav-menu">
		<!-- Example first link. Add the `first` class to the <li> -->
		<li class="first"><a href="{{ URL }}">{{ Link name }}</a></li>

		<!-- Example active link. Add the `active` class to the <li> -->
		<li class="active"><a href="{{ URL }}">{{ Link name }}</a></li>

		<!-- Example normal link. -->
		<li><a href="{{ URL }}">{{ Link name }}</a>
			<!-- Example child link -->
			<ul>
				<li><a href="{{ URL }}">{{ Child link name }}</a></li>
			</ul>
		</li>
	</ul>
</nav>

<nav aria-label="{{ Label for Assistive Technology users (e.g. Related links) }}">
	<!-- Any heading tag may be used as long as the class `related-links-title` is used -->
	<h3 class="related-links-title">Related links</h3>
	<ul class="cui list-widget regular-link">
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
	</ul>
</nav>

<nav aria-label="{{ Label for Assistive Technology users (e.g. Main menu) }}">
	<ul class="cui list-widget arrowed">
		<!-- If the first list item is the most important, a <strong> tag may be used to bold it.
			 Only the first list item may be bolded. -->
		<li><a href="{{ URL }}"><strong>{{ Link name }}</strong></a></li>
		<li><a href="{{ URL }}">{{ Link name }}</a></li>
		<li><a href="{{ URL }}">{{ Link name }}</a></li>
	</ul>
</nav>

<script src="jquery-2.2.4.min.js"></script>
<script src="coc.nav.js"></script>
<script>
	$( document ).ready(function() {
		COC.Nav.init();
	});
</script>

<header class="cui coc-header with-nav-only">
	<div class="header-inner">
		<!-- Skip links provide screen readers and keyboard users a shortcut to the main content area -->
		<ul class="skip-links">
			<li><a href="#{{ Main container id }}" class="skip-link">Skip to main content</a></li>
		</ul>

		<!-- Logo -->
		<a href="#" class="coc-logo">
			<img src="{{ Image URL to coc-logo-simplify.svg }}" class="coc-logo-mobile no-print" alt="Return to the homepage">
			<img src="{{ Image URL to coc-logo }}" class="coc-logo-desktop" alt="Return to the homepage">
		</a>

		<!-- 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>

			<!-- Menu item with a complex 4 column dropdown -->
			<li class="nav-item has-dropdown">
				<!-- NOTE: The URL for the menu item is necessary for graceful degradation should the JavaScript not be loaded. -->
				<a href="{{ URL }}" aria-expanded="false" aria-haspopup="true">{{ Menu item name }} <span class="cicon-angle-down" aria-hidden="true"></span></a>
				<div id="{{ Sub nav id (e.g. sub-nav-1) }}" class="sub-nav" role="dialog" aria-expanded="false" aria-label="{{ Sub nav label (e.g. (Menu item name) sub navigation) }}">
					<button class="cui btn-close-sub-nav-group" aria-label="Close navigation dialog" aria-controls="{{ Sub nav id (e.g. sub-nav-1) }}">
						Close<span class="cicon-close-thin-large" aria-hidden="true"></span>
					</button>
					<ul class="row">
						<!-- Customize the Bootstrap grid column class to suit your needs -->
						<li class="sub-nav-group col-lg-3">
							{{ Catalogue group HTML }}
						</li>
						<li class="sub-nav-group col-lg-3">
							{{ Catalogue group HTML }}
						</li>
						<li class="sub-nav-group col-lg-3">
							{{ Catalogue group HTML }}
						</li>
						<li class="sub-nav-group col-lg-3">
							{{ Catalogue group HTML }}
						</li>
					</ul>
				</div>
			</li><!-- End of Menu item with a complex 4 column dropdown -->

			<!-- Menu item with a simple dropdown -->
			<li class="nav-item has-dropdown has-dropdown-simple">
				<!-- NOTE: The URL for the menu item is necessary for graceful degradation should the JavaScript not be loaded. -->
				<a href="#">Simple dropdown <span class="cicon-angle-down" aria-hidden="true"></span></a>
				<div class="sub-nav">
					<ul>
						<li><a href="#">Lorem ipsum dolor</a></li>
						<li><a href="#">Morbi rutrum lorem</a></li>
						<li><a href="#">Praesent semper</a></li>
					</ul>
				</div>
			</li><!-- End of menu item with a simple dropdown -->

		</ul><!-- End of .nav-menu -->
	</nav>
</header>