Header
The header must be placed at the top of the page.
Basic header
Code
<header class="cui coc-header">
<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="{{ Home page URL }}" class="coc-logo">
<img src="{{ Image URL to coc-logo-simplify.svg }}" alt="Return to the homepage"
class="coc-logo-mobile">
<img src="{{ Image URL to coc-logo.svg }}" alt="Return to the homepage"
class="coc-logo-desktop">
</a>
</div>
</header>
Basic header with title
Code
<header class="cui coc-header">
<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="{{ Home page URL }}" class="coc-logo">
<img src="{{ Image URL to coc-logo-simplify.svg }}" alt="Return to the homepage"
class="coc-logo-mobile">
<img src="{{ Image URL to coc-logo.svg }}" alt="Return to the homepage"
class="coc-logo-desktop">
</a>
<!-- Title -->
<span class="app-title">{{ Application or site title }}</span>
</div>
</header>
Header with search
Read more details about the search pattern.
Code
<script src="jquery-2.2.4.min.js"></script>
<!-- Include individual JavaScript components from Bootstrap 4.1.1 -->
<script src="bootstrap/4.1.1/util.js"></script>
<script src="bootstrap/4.1.1/modal.js"></script>
<!-- Or include the full Bootstrap JavaScript but do not include both -->
<script src="bootstrap/4.1.1/bootstrap.js"></script>
<header class="cui coc-header">
<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>
<li>
<a href="#{{ Search input id }}" class="skip-link">
Skip to search
</a>
</li>
</ul>
<!-- Logo -->
<a href="{{ Home page URL }}" class="coc-logo">
<img src="{{ Image URL to coc-logo-simplify.svg }}" alt="Return to the homepage"
class="coc-logo-mobile">
<img src="{{ Image URL to coc-logo.svg }}" alt="Return to the homepage"
class="coc-logo-desktop">
</a>
<!-- Mobile-UX-optimized Search Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box hidden-xxs">
<label for="search-field" class="sr-only">Search</label>
<input id="search-field" class="form-control search-box-input" type="search">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
<!-- Mobile-UX-optimized Search Part 2. Faux search box, clicking this will open up the modal, only visible for xxs screens -->
<button class="cui search-box visible-xxs" data-toggle="modal" data-target="#modal-search" aria-label="Click to open the search window">
<span class="form-control search-box-input"></span>
<span class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</span>
</button>
<!-- Mobile-UX-optimized Search Part 3. Modal, activated by the mobile faux search box -->
<div id="modal-search" class="cui modal" tabindex="-1" role="dialog" aria-labelledby="modal-search-title" aria-hidden="true">
<div class="modal-dialog modal-fs-mobile" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 id="modal-search-title" class="modal-title">Search</h2>
<button type="button" class="btn-modal-close cui btn-md primary-text" data-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<div class="cui search-box">
<label for="search-field-modal" class="sr-only">Search</label>
<input id="search-field-modal" class="form-control search-box-input" type="search">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
Header with search and mega navigation menu
Read more details about the search pattern and the mega navigation menu pattern.
Code
<script src="jquery-2.2.4.min.js"></script>
<!-- Include individual JavaScript components from Bootstrap 4.1.1 -->
<script src="bootstrap/4.1.1/util.js"></script>
<script src="bootstrap/4.1.1/modal.js"></script>
<!-- Or include the full Bootstrap JavaScript but do not include both -->
<script src="bootstrap/4.1.1/bootstrap.js"></script>
<script src="coc.nav.js"></script>
<script>
$( document ).ready(function() {
COC.Nav.Init();
});
</script>
<header class="cui coc-header">
<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>
<li>
<a href="#{{ Search input id }}" class="skip-link">
Skip to search
</a>
</li>
</ul>
<!-- Logo -->
<a href="{{ Home page URL }}" class="coc-logo">
<img src="{{ Image URL to coc-logo-simplify.svg }}" alt="Return to the homepage"
class="coc-logo-mobile">
<img src="{{ Image URL to coc-logo.svg }}" alt="Return to the homepage"
class="coc-logo-desktop">
</a>
<!-- Mobile-UX-optimized Search Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box hidden-xxs">
<label for="search-field" class="sr-only">Search</label>
<input id="search-field" class="form-control search-box-input" type="search">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
<!-- Mobile-UX-optimized Search Part 2. Faux search box, clicking this will open up the modal, only visible for xxs screens -->
<button class="cui search-box visible-xxs" data-toggle="modal" data-target="#modal-search" aria-label="Click to open the search window">
<span class="form-control search-box-input"></span>
<span class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</span>
</button>
<!-- Mobile-UX-optimized Search Part 3. Modal, activated by the mobile faux search box -->
<div id="modal-search" class="cui modal" tabindex="-1" role="dialog" aria-labelledby="modal-search-title" aria-hidden="true">
<div class="modal-dialog modal-fs-mobile" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 id="modal-search-title" class="modal-title">Search</h2>
<button type="button" class="btn-modal-close cui btn-md primary-text" data-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<div class="cui search-box">
<label for="search-field-modal" class="sr-only">Search</label>
<input id="search-field-modal" class="form-control search-box-input" type="search">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Mega navigation menu button -->
<button id="exploreBtn" class="nav-btn-mobile"
aria-controls="navId" aria-haspopup="true"
aria-label="{{ Label for Assistive Technology users (e.g. Open menu) }}">
<span class="cicon-bars" aria-hidden="true"></span>
</button>
</div>
<!-- Mega navigation menu -->
<nav id="navId" class="cui globalNav">
<button id="closeBtn" class="nav-btn-mobile"
aria-controls="navId" aria-haspopup="true"
aria-label="{{ Label for Assistive Technology users (e.g. Close menu) }}">
Close<span class="cicon-close-thin-large" aria-hidden="true"></span>
</button>
<!-- Simplified for brevity -->
<ul class="nav-menu">
<li class="nav-item">
<a href="{{ URL }}">{{ Menu item name }}</a>
</li>
<li class="nav-item">
<a href="{{ URL }}">{{ Menu item name }}</a>
</li>
<li class="nav-item">
<a href="{{ URL }}">{{ Menu item name }}</a>
</li>
</ul>
</nav>
</header>
Header with mega navigation menu
Read more details about the mega navigation menu pattern.
Code
<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="{{ Home page URL }}" class="coc-logo">
<img src="{{ Image URL to coc-logo-simplify.svg }}" alt="Return to the homepage"
class="coc-logo-mobile">
<img src="{{ Image URL to coc-logo.svg }}" alt="Return to the homepage"
class="coc-logo-desktop">
</a>
<!-- Mega navigation menu button -->
<button id="exploreBtn" class="nav-btn-mobile"
aria-controls="navId" aria-haspopup="true"
aria-label="{{ Label for Assistive Technology users (e.g. Open menu) }}">
<span class="cicon-bars" aria-hidden="true"></span>
</button>
</div>
<!-- Mega navigation menu -->
<nav id="navId" class="cui globalNav">
<button id="closeBtn" class="nav-btn-mobile"
aria-controls="navId" aria-haspopup="true"
aria-label="{{ Label for Assistive Technology users (e.g. Close menu) }}">
Close<span class="cicon-close-thin-large" aria-hidden="true"></span>
</button>
<!-- Simplified for brevity -->
<ul class="nav-menu">
<li class="nav-item">
<a href="{{ URL }}">{{ Menu item name }}</a>
</li>
<li class="nav-item">
<a href="{{ URL }}">{{ Menu item name }}</a>
</li>
<li class="nav-item">
<a href="{{ URL }}">{{ Menu item name }}</a>
</li>
</ul>
</nav>
</header>
Header with mega navigation menu and search for small screens only
Read more details about the search pattern and the mega navigation menu pattern.
Code
<script src="jquery-2.2.4.min.js"></script>
<!-- Include individual JavaScript components from Bootstrap 4.1.1 -->
<script src="bootstrap/4.1.1/util.js"></script>
<script src="bootstrap/4.1.1/modal.js"></script>
<!-- Or include the full Bootstrap JavaScript but do not include both -->
<script src="bootstrap/4.1.1/bootstrap.js"></script>
<script src="coc.nav.js"></script>
<script>
$( document ).ready(function() {
COC.Nav.Init();
});
</script>
<header class="cui coc-header with-nav-only with-mobile-only-search">
<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>
<li>
<a href="#{{ Search input id }}" class="skip-link">
Skip to search
</a>
</li>
</ul>
<!-- Logo -->
<a href="{{ Home page URL }}" class="coc-logo">
<img src="{{ Image URL to coc-logo-simplify.svg }}" alt="Return to the homepage"
class="coc-logo-mobile">
<img src="{{ Image URL to coc-logo.svg }}" alt="Return to the homepage"
class="coc-logo-desktop">
</a>
<!-- Mobile-UX-optimized Search Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box hidden-xxs">
<label for="search-field" class="sr-only">Search</label>
<input id="search-field" class="form-control search-box-input" type="search">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
<!-- Mobile-UX-optimized Search Part 2. Faux search box, clicking this will open up the modal, only visible for xxs screens -->
<button class="cui search-box visible-xxs" data-toggle="modal" data-target="#modal-search" aria-label="Click to open the search window">
<span class="form-control search-box-input"></span>
<span class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</span>
</button>
<!-- Mobile-UX-optimized Search Part 3. Modal, activated by the mobile faux search box -->
<div id="modal-search" class="cui modal" tabindex="-1" role="dialog" aria-labelledby="modal-search-title" aria-hidden="true">
<div class="modal-dialog modal-fs-mobile" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 id="modal-search-title" class="modal-title">Search</h2>
<button type="button" class="btn-modal-close cui btn-md primary-text" data-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<div class="cui search-box">
<label for="search-field-modal" class="sr-only">Search</label>
<input id="search-field-modal" class="form-control search-box-input" type="search">
<button class="cui search-box-btn btn-md icon-only primary">
<span class="cicon-search" aria-hidden="true"></span>
<span class="sr-only">Submit search</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Mega navigation menu button -->
<button id="exploreBtn" class="nav-btn-mobile"
aria-controls="navId" aria-haspopup="true"
aria-label="{{ Label for Assistive Technology users (e.g. Open menu) }}">
<span class="cicon-bars" aria-hidden="true"></span>
</button>
</div>
<!-- Mega navigation menu -->
<nav id="navId" class="cui globalNav">
<button id="closeBtn" class="nav-btn-mobile"
aria-controls="navId" aria-haspopup="true"
aria-label="{{ Label for Assistive Technology users (e.g. Close menu) }}">
Close<span class="cicon-close-thin-large" aria-hidden="true"></span>
</button>
<!-- Simplified for brevity -->
<ul class="nav-menu">
<li class="nav-item">
<a href="{{ URL }}">{{ Menu item name }}</a>
</li>
<li class="nav-item">
<a href="{{ URL }}">{{ Menu item name }}</a>
</li>
<li class="nav-item">
<a href="{{ URL }}">{{ Menu item name }}</a>
</li>
</ul>
</nav>
</header>