Note |
This page is archived under version 1.5 and is available for reference purposes only. The latest version of Pattern Library is 2.
Header
Below are various configurations of the header. Choose the configuration that best suits your website or application.
Header with visual identifier
<!-- Header with visual identifier -->
<div class="cui coc-header">
<a href="#insert-homepage-link" id="coc-logo" class="coc-logo">
<img src="../img/simplify-logo/coc-logo-simplify.svg" alt="Return to the homepage" id="coc-logo-mobile" class="no-print" />
<img src="../img/coc-logo.svg" alt="Return to the homepage" id="coc-logo-desktop" />
</a>
</div>
Header with visual identifier and search
<script src="jquery-2.2.4.min.js"></script>
<script src="jquery.modal.js"></script>
<div class="cui coc-header">
<a class="coc-logo" href="#" id="coc-logo">
<img src="/img/simplify-logo/coc-logo-simplify.svg" alt="Return to the homepage" id="coc-logo-mobile" class="no-print" />
<img src="/img/coc-logo.svg" alt="Return to the homepage" id="coc-logo-desktop" />
</a>
<!-- Mobile Search Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box hidden-xxs">
<label for="search-field-1" class="hidden">Search</label>
<input id="search-field-1" class="search-box-input" type="text">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
<!-- Mobile Search Part 2. Fake search box, clicking this will open up the modal, only visible for xxs screens -->
<a href="#modal-search" class="cui search-box visible-xxs" role="button" tabindex="0" aria-label="click to open the search window" rel="modal:open">
<div class="search-box-input"></div>
<div class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</div>
</a>
<!-- Mobile Search Part 3. Modal, embedded in the document, activated by the mobile fake search box -->
<div id="modal-search" class="cui modal-window modal-window-search">
<div class="modal-window-header">
<a class="btn-modal-close cui btn-md primary-text" rel="modal:close">Close</a>
</div>
<div class="modal-window-body">
<div class="cui search-box">
<label for="search-field-modal-1" class="hidden">Search</label>
<input id="search-field-modal-1" class="search-box-input" type="text">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
</div>
</div>
</div><!-- End of .coc-header -->
Header with visual identifier, search, and global navigation menu
<script src="jquery-2.2.4.min.js"></script>
<script src="jquery.modal.js"></script>
<script src="COC.Nav.js"></script>
<script>
$( '#navId' ).ready(function() {
COC.Nav.Init();
});
</script>
<div class="cui coc-header coc-header-nav-search">
<a href="#insert-homepage-link" id="coc-logo" class="coc-logo">
<img src="../img/simplify-logo/coc-logo-simplify.svg" alt="Return to the homepage" id="coc-logo-mobile" class="no-print" />
<img src="../img/coc-logo.svg" alt="Return to the homepage" id="coc-logo-desktop" />
</a>
<!-- Mobile Search Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box hidden-xxs">
<label for="search-field-2" class="hidden">Search</label>
<input id="search-field-2" class="search-box-input" type="text">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
<!-- Mobile Search Part 2. Fake search box, clicking this will open up the modal, only visible for xxs screens -->
<a href="#modal-search-2" class="cui search-box visible-xxs" role="button" tabindex="0" aria-label="click to open the search window" rel="modal:open">
<div class="search-box-input"></div>
<div class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</div>
</a>
<!-- Mobile Search Part 3. Modal, embedded in the document, activated by the mobile fake search box -->
<div id="modal-search-2" class="cui modal-window modal-window-search">
<div class="modal-window-header">
<a class="btn-modal-close cui btn-md primary-text" rel="modal:close">Close</a>
</div>
<div class="modal-window-body">
<div class="cui search-box">
<label for="search-field-modal-2" class="hidden">Search</label>
<input id="search-field-modal-2" class="search-box-input" type="text">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
</div>
</div>
<-- Global navigation menu -->
<nav id="navId" class="cui coc-secondary-9L-nav globalNav">
<ul class="nav-menu">
<button type="button" id="exploreBtn" class="navBtnMobile" aria-controls="navId" aria-haspopup="true" aria-label="menu expanded">Explore<span class="cicon-bars"></span></button>
<button type="button" id="closeBtn" class="navBtnMobile" aria-controls="navId" aria-haspopup="true" aria-label="menu collapsed">Close<span class="cicon-times"></span></button>
<li class="nav-item">
... Truncated for brevity
</li>
</ul>
</nav>
</div><!-- End of .coc-header -->
Header with visual identifier and global navigation menu
<script src="jquery-2.2.4.min.js"></script>
<script src="COC.Nav.js"></script>
<script>
$( '#navId' ).ready(function() {
COC.Nav.Init();
});
</script>
<div class="cui coc-header coc-header-withNavOnly">
<a href="#insert-homepage-link" id="coc-logo" class="coc-logo">
<img src="../img/simplify-logo/coc-logo-simplify.svg" alt="Return to the homepage" id="coc-logo-mobile" class="no-print" />
<img src="../img/coc-logo.svg" alt="Return to the homepage" id="coc-logo-desktop" />
</a>
<ul id="skiplinks">
<li><a href="#content" accesskey="S">Skip to main content</a></li>
</ul>
<-- Global navigation menu -->
<nav id="navId" class="cui coc-secondary-9L-nav globalNav">
<ul class="nav-menu">
<button type="button" id="exploreBtn" class="navBtnMobile" aria-controls="navId" aria-haspopup="true" aria-label="menu expanded">Explore<span class="cicon-bars"></span></button>
<button type="button" id="closeBtn" class="navBtnMobile" aria-controls="navId" aria-haspopup="true" aria-label="menu collapsed">Close<span class="cicon-times"></span></button>
<li class="nav-item">
... Truncated for brevity
</li>
</ul>
</nav>
</div><!-- End of .coc-header -->
Header with visual identifier, global navigation menu, and search on small screens only
<script src="jquery-2.2.4.min.js"></script>
<script src="jquery.modal.js"></script>
<script src="COC.Nav.js"></script>
<script>
$( '#navId' ).ready(function() {
COC.Nav.Init();
});
</script>
<div class="cui coc-header coc-header-withNavOnly coc-header-searchMobileOnly">
<a href="#insert-homepage-link" id="coc-logo" class="coc-logo">
<img src="../img/simplify-logo/coc-logo-simplify.svg" alt="Return to the homepage" id="coc-logo-mobile" class="no-print" />
<img src="../img/coc-logo.svg" alt="Return to the homepage" id="coc-logo-desktop" />
</a>
<!-- Mobile Search Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box hidden-xxs">
<label for="search-field-4" class="hidden">Search</label>
<input id="search-field-4" class="search-box-input" type="text">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
<!-- Mobile Search Part 2. Fake search box, clicking this will open up the modal, only visible for xxs screens -->
<a href="#modal-search-4" class="cui search-box visible-xxs" role="button" tabindex="0" aria-label="click to open the search window" rel="modal:open">
<div class="search-box-input"></div>
<div class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</div>
</a>
<!-- Mobile Search Part 3. Modal, embedded in the document, activated by the mobile fake search box -->
<div id="modal-search-4" class="cui modal-window modal-window-search">
<div class="modal-window-header">
<a class="btn-modal-close cui btn-md primary-text" rel="modal:close">Close</a>
</div>
<div class="modal-window-body">
<div class="cui search-box">
<label for="search-field-modal-4" class="hidden">Search</label>
<input id="search-field-modal-4" class="search-box-input" type="text">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
</div>
</div>
<-- Global navigation menu -->
<nav id="navId" class="cui coc-secondary-9L-nav globalNav">
<ul class="nav-menu">
<button type="button" id="exploreBtn" class="navBtnMobile" aria-controls="navId" aria-haspopup="true" aria-label="menu expanded">Explore<span class="cicon-bars"></span></button>
<button type="button" id="closeBtn" class="navBtnMobile" aria-controls="navId" aria-haspopup="true" aria-label="menu collapsed">Close<span class="cicon-times"></span></button>
<li class="nav-item">
... Truncated for brevity
</li>
</ul>
</nav>
</div><!-- End of .header -->