Header
The header must be placed at the top of the page. The header may contain a combination of the site (or application) title, search box, and mega menu.
Demo
Use the select box below to see the available configurations.
Application or site 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><button onclick="window.location.href = '#{{ Main container id }};" class="skip-link" id="skip-main-content">Skip to main content</button></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>
</div>
</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><button onclick="window.location.href = '#{{ Main container id }};" class="skip-link" id="skip-main-content">Skip to main content</button></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>
<!-- Title -->
<span class="app-title">{{ Application or site title }}</span>
</div>
</header>Code
<script src="jquery-3.5.1.min.js"></script>
<!-- Include individual JavaScript components from Bootstrap 4.1.1 -->
<script src="bootstrap/4.4.1/util.js"></script>
<script src="bootstrap/4.4.1/modal.js"></script>
<!-- Or include the full Bootstrap JavaScript but do not include both -->
<script src="bootstrap/4.4.1/bootstrap.js"></script>
<script>
$( document ).ready(function() {
// JS to toggle search
$('.search-input-demo').click( function() {
$('.toggled-search').slideDown(200) ;
});
$('.search-toggle-btn').click( function() {
$('.toggled-search').slideUp(200);
});
// hide the 'search suggestion' div with esc key
$( document ).on( 'keydown', function ( e ) {3
if ( e.keyCode === 27 ) {
$('.toggled-search').hide();
}
});
});
</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><button onclick="window.location.href = '#{{ Main container id }};" class="skip-link" id="skip-main-content">Skip to main content</button></li>
<li><button onclick="window.location.href = '#search-field';" class="skip-link d-none d-sm-block" id="skip-search-bar">Skip to search</button></li>
<li><button onclick="window.location.href = '#search-field-modal';" class="skip-link d-block d-sm-none" id="skip-search-bar-mobile" data-toggle="modal" data-target="#modal-search" aria-label="Click to open the search window">Skip to Search</button></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>
<!-- The 'search-container' div is the required div when implement the search on the header -->
<div class="cui search-container">
<!-- Mobile-UX-optimized Search Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box d-none d-sm-block">
<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>
<!-- Search suggestion box is optional -->
<div class="toggled-search bg-medium" style="display:none;">
<div class="toggle-search-body">
<button class="cui btn-sm primary-text search-toggle-btn">Close</button>
<h3 class="text-large mt-md mb-xs">Search suggestions</h3>
<!--Add the suggestion links-->
<a class="cui btn-sm src-btn" href="{{ URL }}">{{ Text }}</a>
<a class="cui btn-sm src-btn" href="{{ URL }}">{{ Text }}</a>
</div>
</div>
<!-- Search sugguestion box end -->
<!-- Mobile-UX-optimized Search Part 2. Faux search box, clicking this will open up the modal, only visible for xxs screens -->
<!-- Add the 'animate__search-box' class will make the modal window animation to slide down and up -->
<button class="cui search-box animate__search-box d-block d-sm-none" 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>
</div>
</div>
</header>
<!-- Mobile-UX-optimized Search Part 3. Modal, activated by the mobile faux search box.
Must be placed outside of the <header> -->
<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-container">
<div class="cui search-box">
<label for="search-field-modal" class="sr-only">Search</label>
<input id="search-field-modal" name="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>
<!-- Place the toggle search suggestion links here -->
<div>
<h3 class="text-large mt-md mb-xs">Search suggestions</h3>
<!--Add the suggestion buttons-->
<button class="cui btn-sm src-btn" href="{{ URL }}">{{ Text }}</button>
<button class="cui btn-sm src-btn" href="{{ URL }}">{{ Text }}</button>
</div>
</div>
</div>
</div>
</div>
</div>Code
<script src="jquery-3.5.1.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><button onclick="window.location.href = '#{{ Main container id }};" class="skip-link" id="skip-main-content">Skip to main content</button></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>
<li class="nav-item">
<a href="{{ URL }}">{{ Menu item name }}</a>
</li>
...
</ul><!-- End of .nav-menu -->
</nav>
</header>Code
<script src="jquery-3.5.1.min.js"></script>
<!-- Include individual JavaScript components from Bootstrap 4.1.1 -->
<script src="bootstrap/4.4.1/util.js"></script>
<script src="bootstrap/4.4.1/modal.js"></script>
<!-- Or include the full Bootstrap JavaScript but do not include both -->
<script src="bootstrap/4.4.1/bootstrap.js"></script>
<!-- Animation scripts for slide and fade ins -->
<script src="../js/coc.animations.js"></script>
<script type="text/javascript">var searchModalId = "<?= 1 ?>";</script>
<script src="coc.nav.js"></script>
<script>
$( document ).ready(function() {
COC.Nav.init();
// JS to toggle search
$('.search-input-demo').click( function() {
$('.toggled-search').slideDown(200) ;
});
$('.search-toggle-btn').click( function() {
$('.toggled-search').slideUp(200);
});
// hide the 'search suggestion' div with esc key
$( document ).on( 'keydown', function ( e ) {3
if ( e.keyCode === 27 ) {
$('.toggled-search').hide();
}
});
});
</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><button onclick="window.location.href = '#{{ Main container id }};" class="skip-link" id="skip-main-content">Skip to main content</button></li>
<li><button onclick="window.location.href = '#search-field';" class="skip-link d-none d-sm-block" id="skip-search-bar">Skip to search</button></li>
<li><button onclick="window.location.href = '#search-field-modal';" class="skip-link d-block d-sm-none" id="skip-search-bar-mobile" data-toggle="modal" data-target="#modal-search" aria-label="Click to open the search window">Skip to Search</button></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>
<!-- The 'search-container' div is the required div when implement the search on the header -->
<div class="cui search-container">
<!-- Mobile-UX-optimized Search Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box d-none d-sm-block">
<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>
<!-- Search suggestion box is optional -->
<div class="toggled-search bg-medium" style="display:none;">
<div class="toggle-search-body">
<button class="cui btn-sm primary-text search-toggle-btn">Close</button>
<h3 class="text-large mt-md mb-xs">Search suggestions</h3>
<!--Add the suggestion links-->
<a class="cui btn-sm src-btn" href="{{ URL }}">{{ Text }}</a>
<a class="cui btn-sm src-btn" href="{{ URL }}">{{ Text }}</a>
</div>
</div>
<!-- Search sugguestion box end -->
<!-- Mobile-UX-optimized Search Part 2. Faux search box, clicking this will open up the modal, only visible for xxs screens -->
<!-- Add the 'animate__search-box' class will make the modal window animation to slide down and up -->
<button class="cui search-box animate__search-box d-block d-sm-none" 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>
</div>
<!-- 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>
<li class="nav-item">
<a href="{{ URL }}">{{ Menu item name }}</a>
</li>
...
</ul><!-- End of .nav-menu -->
</nav>
</header>
<!-- Mobile-UX-optimized Search Part 3. Modal, activated by the mobile faux search box.
Must be placed outside of the <header> -->
<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-container">
<div class="cui search-box">
<label for="search-field-modal" class="sr-only">Search</label>
<input id="search-field-modal" name="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>
<!-- Place the toggle search suggestion links here -->
<div>
<h3 class="text-large mt-md mb-xs">Search suggestions</h3>
<!--Add the suggestion buttons-->
<button class="cui btn-sm src-btn" href="{{ URL }}">{{ Text }}</button>
<button class="cui btn-sm src-btn" href="{{ URL }}">{{ Text }}</button>
</div>
</div>
</div>
</div>
</div>
</div>Code
<script src="jquery-3.5.1.min.js"></script>
<!-- Include individual JavaScript components from Bootstrap 4.1.1 -->
<script src="bootstrap/4.4.1/util.js"></script>
<script src="bootstrap/4.4.1/modal.js"></script>
<!-- Or include the full Bootstrap JavaScript but do not include both -->
<script src="bootstrap/4.4.1/bootstrap.js"></script>
<!-- Animation scripts for slide and fade ins -->
<script src="../js/coc.animations.js"></script>
<script type="text/javascript">var searchModalId = "<?= 1 ?>";</script>
<script src="coc.nav.js"></script>
<script>
$( document ).ready(function() {
COC.Nav.init();
$('.search-input-demo').click( function() {
$('.toggled-search').slideDown(200) ;
});
$('.search-toggle-btn').click( function() {
$('.toggled-search').slideUp(200);
});
// hide the 'search suggestion' div with esc key
$( document ).on( 'keydown', function ( e ) {3
if ( e.keyCode === 27 ) {
$('.toggled-search').hide();
}
});
});
</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><button onclick="window.location.href = '#{{ Main container id }};" class="skip-link" id="skip-main-content">Skip to main content</button></li>
<li><button onclick="window.location.href = '#search-field';" class="skip-link d-none d-sm-block" id="skip-search-bar">Skip to search</button></li>
<li><button onclick="window.location.href = '#search-field-modal';" class="skip-link d-block d-sm-none" id="skip-search-bar-mobile" data-toggle="modal" data-target="#modal-search" aria-label="Click to open the search window">Skip to Search</button></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>
<!-- The 'search-container' div is the required div when implement the search on the header -->
<div class="cui search-container">
<!-- Mobile-UX-optimized Search Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box d-none d-sm-block">
<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>
<!-- Search suggestion box is optional -->
<div class="toggled-search bg-medium" style="display:none;">
<div class="toggle-search-body">
<button class="cui btn-sm primary-text search-toggle-btn">Close</button>
<h3 class="text-large mt-md mb-xs">Search suggestions</h3>
<!--Add the suggestion links-->
<a class="cui btn-sm src-btn" href="{{ URL }}">{{ Text }}</a>
<a class="cui btn-sm src-btn" href="{{ URL }}">{{ Text }}</a>
</div>
</div>
<!-- Search sugguestion box end -->
<!-- Mobile-UX-optimized Search Part 2. Faux search box, clicking this will open up the modal, only visible for xxs screens -->
<!-- Add the 'animate__search-box' class will make the modal window animation to slide down and up -->
<button class="cui search-box animate__search-box d-block d-sm-none" 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>
</div>
<!-- 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>
<li class="nav-item">
<a href="{{ URL }}">{{ Menu item name }}</a>
</li>
...
</ul><!-- End of .nav-menu -->
</nav>
</header>
<!-- Mobile-UX-optimized Search Part 3. Modal, activated by the mobile faux search box.
Must be placed outside of the <header> -->
<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-container">
<div class="cui search-box">
<label for="search-field-modal" class="sr-only">Search</label>
<input id="search-field-modal" name="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>
<!-- Place the toggle search suggestion links here -->
<div>
<h3 class="text-large mt-md mb-xs">Search suggestions</h3>
<!--Add the suggestion buttons-->
<button class="cui btn-sm src-btn" href="{{ URL }}">{{ Text }}</button>
<button class="cui btn-sm src-btn" href="{{ URL }}">{{ Text }}</button>
</div>
</div>
</div>
</div>
</div>
</div>