MCC’s website has six unique navigation areas:
- Footer teaser navigation: appears in the footer of every page and displays links to frequently-sought website sections or website content.
- Footer utility navigation: appears at the bottom of the footer on every page and displays links that are either required by federal policy or that a user would expect to find in this location.
- Header utility navigation: appears at the top of every page in a blue bar except in the small breakpoint, it is moved into the footer of the page.
- Local navigation: appears in the left column of pages when context requires it to be there; this navigation is specific to the page or section in which it appears.
- Primary navigation: appears at the top of every page alongside the logo just below the header utility navigation. In smaller breakpoints it appears only as a hamburger icon labeled “Menu.”
- Social navigation: appears below the footer teaser navigation and displays links to MCC's social properties and pages where users can engage with MCC via email newsletters, podcasts, etc.
Navigation Code Patterns
Facet Filters <aside id="search-facets">
The facet filter is used on list pages to help users quickly narrow the content displayed based on selections from drop-down menus.
- Output
-
- Code
-
<aside id="search-facets">
<h6>Filter by</h6>
<div class="filter-content">
<div class="item-list">
<select>
<option selected>Any region</option>
<option value="#">Africa (16)</option>
<option value="#">Europe, Asia and the Pacific (7)</option>
<option value="#">Latin America (2)</option>
</select>
</div>
</div>
</aside>
Local Navigation <div class="local-nav-html>
- Output
-
- Code
-
<div class="local-nav-html">
<h4><a href="#">About Us</a></h4>
<ul>
<li><a href="#">Board of Directors</a></li>
<li class="active-trail"><a href="#" class="active">Staff</a>
<ul>
<li><a href="#">Secondary Link One</a></li>
<li class="active-trail"><a href="#" class="active">Secondary Link Two</a>
<ul>
<li><a href="#">Tertiary Link One</a></li>
<li class="active-trail"><a href="#" class="active">Tertiary Link Two</a></li>
<li><a href="#">Tertiary Link Three</a></li>
</ul>
</li>
<li><a href="#">Secondary Link Three</a></li>
<li><a href="#">Secondary Link Four</a></li>
</ul>
</li>
<li><a href="#">History</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
Pagination <ul class="pager">
- Output
-
- Code
-
<div class="item-list pager-container">
<ul class="pager clearfix">
<li class="pager-first first"><a title="Go to first page" href="#"><i class="fa fa-angle-double-left"></i> first</a></li>
<li class="pager-previous"><a title="Go to previous page" href="#"><i class="fa fa-angle-left"></i> previous</a></li>
<li class="pager-item"><a title="Go to page 1" href="#">1</a></li>
<li class="pager-current"><a title="Go to page 2" href="#">2</a></li>
<li class="pager-item"><a title="Go to page 3" href="#">3</a></li>
<li class="pager-item"><a title="Go to page 4" href="#">4</a></li>
<li class="pager-next"><a title="Go to next page" href="#">next <i class="fa fa-angle-right"></i></a></li>
<li class="pager-last last"><a title="Go to last page" href="#">last <i class="fa fa-angle-double-right"></i></a></li>
</ul>
</div>
