Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS
A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

  • Special Publication:  Public Website Visual Style Guide
  • August 2015

Navigation

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>