Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.6)

Note

This page is archived under version 1.6 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.

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="#content" class="skip-link">Skip to main content</a></li>
        </ul>

        <!-- Logo -->
        <a href="#" class="coc-logo">
            <img src="../img/coc-logo-simplify.svg" alt="Return to the homepage" class="coc-logo-mobile no-print">
            <img src="../img/coc-logo.svg" alt="Return to the homepage" class="coc-logo-desktop">
        </a>
    </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="#content" class="skip-link">Skip to main content</a></li>
            <li><a href="#search-field" class="skip-link">Skip to search</a></li>
        </ul>

        <!-- Logo -->
        <a href="#" class="coc-logo">
            <img src="../img/coc-logo-simplify.svg" alt="Return to the homepage" class="coc-logo-mobile no-print">
            <img src="../img/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"></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"></span>
                <span class="sr-only">Submit search</span>
            </span>
        </button>

        <!-- Mobile-UX-optimized Search Part 3. Modal, embedded in the document, 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"></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>
    $( '#navId' ).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="#content" class="skip-link">Skip to main content</a></li>
            <li><a href="#search-field" class="skip-link">Skip to search</a></li>
        </ul>

        <!-- Logo -->
        <a href="#" class="coc-logo">
            <img src="../img/coc-logo-simplify.svg" alt="Return to the homepage" class="coc-logo-mobile no-print">
            <img src="../img/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"></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"></span>
                <span class="sr-only">Submit search</span>
            </span>
        </button>

        <!-- Mobile-UX-optimized Search Part 3. Modal, embedded in the document, 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"></span>
                                <span class="sr-only">Submit search</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Mega navigation menu button -->
        <button id="exploreBtn" type="button" class="nav-btn-mobile" aria-controls="navId" aria-haspopup="true" aria-label="Open menu">
            <span class="sr-only">Explore</span>
            <span class="cicon-bars"></span>
        </button>
    </div>

    <!-- Mega navigation menu -->
    <nav id="navId" class="cui globalNav">
        <button id="closeBtn" type="button" class="nav-btn-mobile" aria-controls="navId" aria-haspopup="true" aria-label="Close menu">
            Close<span class="cicon-close-thin-large"></span>
        </button>
        <!-- Simplified for brevity -->
        <ul class="nav-menu">
            <li class="nav-item">
                <a href="#">Menu item</a>
            </li>
            <li class="nav-item">
                <a href="#">Menu item</a>
            </li>
            <li class="nav-item">
                <a href="#">Menu item</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>
    $( '#navId' ).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="#content" class="skip-link">Skip to main content</a></li>
            <li><a href="#search-field" class="skip-link">Skip to search</a></li>
        </ul>

        <!-- Logo -->
        <a href="#" class="coc-logo">
            <img src="../img/coc-logo-simplify.svg" alt="Return to the homepage" class="coc-logo-mobile no-print">
            <img src="../img/coc-logo.svg" alt="Return to the homepage" class="coc-logo-desktop">
        </a>

        <!-- Mega navigation menu button -->
        <button id="exploreBtn" type="button" class="nav-btn-mobile" aria-controls="navId" aria-haspopup="true" aria-label="Open menu">
            <span class="sr-only">Explore</span>
            <span class="cicon-bars"></span>
        </button>
    </div>

    <!-- Mega navigation menu -->
    <nav id="navId" class="cui globalNav">
        <button id="closeBtn" type="button" class="nav-btn-mobile" aria-controls="navId" aria-haspopup="true" aria-label="Close menu">
            Close<span class="cicon-close-thin-large"></span>
        </button>
        <!-- Simplified for brevity -->
        <ul class="nav-menu">
            <li class="nav-item">
                <a href="#">Menu item</a>
            </li>
            <li class="nav-item">
                <a href="#">Menu item</a>
            </li>
            <li class="nav-item">
                <a href="#">Menu item</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>
    $( '#navId' ).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="#content" class="skip-link">Skip to main content</a></li>
            <li><a href="#search-field" class="skip-link">Skip to search</a></li>
        </ul>

        <!-- Logo -->
        <a href="#" class="coc-logo">
            <img src="../img/coc-logo-simplify.svg" alt="Return to the homepage" class="coc-logo-mobile no-print">
            <img src="../img/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"></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"></span>
                <span class="sr-only">Submit search</span>
            </span>
        </button>

        <!-- Mobile-UX-optimized Search Part 3. Modal, embedded in the document, 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"></span>
                                <span class="sr-only">Submit search</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Mega navigation menu button -->
        <button id="exploreBtn" type="button" class="nav-btn-mobile" aria-controls="navId" aria-haspopup="true" aria-label="Open menu">
            <span class="sr-only">Explore</span>
            <span class="cicon-bars"></span>
        </button>
    </div>

    <!-- Mega navigation menu -->
    <nav id="navId" class="cui globalNav">
        <button id="closeBtn" type="button" class="nav-btn-mobile" aria-controls="navId" aria-haspopup="true" aria-label="Close menu">
            Close<span class="cicon-close-thin-large"></span>
        </button>
        <!-- Simplified for brevity -->
        <ul class="nav-menu">
            <li class="nav-item">
                <a href="#">Menu item</a>
            </li>
            <li class="nav-item">
                <a href="#">Menu item</a>
            </li>
            <li class="nav-item">
                <a href="#">Menu item</a>
            </li>
        </ul>
    </nav>
</header>