Menus

Secondary navigation menu

The secondary navigation menu is intended to live in a left hand sidebar of a web page. See an example on calgary.ca.

The secondary navigation menu is a fully responsive menu. For mobile and tablet views, the menu is collapsed by default. For larger screens, the menu is always expanded. JavaScript is used to handle expanding and collapsing the menu for mobile and tablet views.

Demo

Code


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

Other navigation

Code


<!-- Use below code for Related Links Menu -->
<nav aria-labelledby="{{ Header ID }} "">
	<!-- Any heading tag may be used as long as the class `group-list-title"` is used -->
	<h3 class="group-list-title" id="{{ Header ID }}>Related links</h3>
	<ul class="cui list-widget">
		<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>

<!-- Use below code for Arrowed Links Menu with link -->
<nav aria-labelledby="{{ Header ID }} class="cui list-widget">
	<!-- Any heading tag may be used as long as the class `group-list-title"` is used -->
	<h3 class="group-title" id="{{ Header ID }}>
		<a class="group-title" href="{{ URL }}">
		<!-- Optional Icon code -->
		<span class="{{ Icon Class Name }}" aria-hidden="true"></span>
		<!-- Optional Icon code end -->
		<span class="group-title-text">{{ Menu header name }}</span>
		<!-- Optional link description code -->
		<span class="group-title-desc">Example optional description of the link above.</span>
		<!-- Optional link description code end -->
		</a>
	</h3>
	<ul class="cui list-widget group-links 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> <strong> <a href="{{ URL }}">{{ Link text }}</a> </strong> </li>
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
	</ul>
</nav>

<!-- Use below code for Arrowed Links Menu without link -->
<nav aria-labelledby="{{ Header ID }} class="cui list-widget">
	<!-- Any heading tag may be used as long as the class `group-list-title"` is used -->
	<h3 class="group-title" id="{{ Header ID }}">
		<!-- Optional Icon code -->
		<span class="{{ Icon Class Name }}" aria-hidden="true"></span>
		<!-- Optional Icon code end -->
		<span class="group-title-text">{{ Menu header name }}</span>
	</h3>
	<ul class="cui list-widget group-links 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> <strong> <a href="{{ URL }}">{{ Link text }}</a> </strong> </li>
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
	</ul>
</nav>

Mega navigation menu

The mega menu has been designed to work in conjunction with the header pattern.

The menu can contain dropdown elements that can be simple or complex depending on the needs of the application. In the complex dropdown demo below, the catalogue group pattern is utilized to organize the sub-menu links.

Demo

Select menu configuration

Code


<script src="jquery-2.2.4.min.js"></script>
<script type="text/javascript">var searchModalId = "<?= 1 ?>";</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 nav-group">
						<!-- Customize the Bootstrap grid column class to suit your needs -->
						<li class="sub-nav-group col-lg-3">
							<ul class="cui catalogue-group">
								<li>
									<a class="group-title" href="{{ URL }}">
										<!-- Optional decorative icon -->
										<span class="{{ Icon class (e.g. cicon-home) }}" aria-hidden="true"></span>
										<span class="group-title-text">{{ Title }}</span>
									</a>
									<ul class="group-links">
										<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>
								</li>
							</ul>
						</li>
						<li class="sub-nav-group col-lg-3">
							<ul class="cui catalogue-group">
								<li>
									<a class="group-title" href="{{ URL }}">
										<!-- Optional decorative icon -->
										<span class="{{ Icon class (e.g. cicon-home) }}" aria-hidden="true"></span>
										<span class="group-title-text">{{ Title }}</span>
									</a>
									<ul class="group-links">
										<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>
								</li>
							</ul>
						</li>
						<li class="sub-nav-group col-lg-3">
							<ul class="cui catalogue-group">
								<li>
									<a class="group-title" href="{{ URL }}">
										<!-- Optional decorative icon -->
										<span class="{{ Icon class (e.g. cicon-home) }}" aria-hidden="true"></span>
										<span class="group-title-text">{{ Title }}</span>
									</a>
									<ul class="group-links">
										<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>
								</li>
							</ul>
						</li>
						<li class="sub-nav-group col-lg-3">
							<ul class="cui catalogue-group">
								<li>
									<a class="group-title" href="{{ URL }}">
										<!-- Optional decorative icon -->
										<span class="{{ Icon class (e.g. cicon-home) }}" aria-hidden="true"></span>
										<span class="group-title-text">{{ Title }}</span>
									</a>
									<ul class="group-links">
										<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>
								</li>
							</ul>
						</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="{{ URL }}">{{ Link text }}</a></li>
						<li><a href="{{ URL }}">{{ Link text }}</a></li>
						<li><a href="{{ URL }}">{{ Link text }}</a></li>
					</ul>
				</div>
			</li><!-- End of menu item with a simple dropdown -->

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

Information This site is moving

Note

Secondary navigation menu

Demo

Code

Other navigation

Related links and Arrowed list style

Code

Mega navigation menu

Demo

Code