Header

The header is a custom HTML element that can be added to any webpage.

Requirements

The files for the header component are hosted on the brand CDN. You do not need to download or host any files of your own to use the header.

To use the header on a page, add the following lines to the page's head element.

<link rel="stylesheet" href="https://cdn.brand.illinois.edu/components/il-header.css">
<script type="module" async src="https://cdn.brand.illinois.edu/components/il-header.mjs"></script>

Basic usage

The header should be placed at the beginning of the document body, before any meaningful page content. The following is a full example of a header:

<il-header>
  <a slot="primary-unit" href="https://stratcom.illinois.edu/">Strategic Communications and Marketing</a>
  <a slot="site-name" href="/index.html">Header demonstration site</a>
  <nav slot="links" aria-label="Utility">
    <ul>
      <li><a href="/apply.html">Apply</a></li>
      <li><a href="/visit.html">Visit</a></li>
      <li><a href="/give.html">Give</a></li>
    </ul>
  </nav>
  <form slot="search" method="get" action="/search.php" role="search">
    <input type="search" name="search" aria-labelledby="search-button">
    <button id="search-button" type="submit">Search</button>
  </form>
  <il-header-nav slot="navigation">
    <ul>
      <li><a href="/about.html">About</a></li>
      <li><a href="/admissions.html">Admissions</a></li>
      <li><a href="/academics.html">Academics</a></li>
      <li><a href="/research.html">Research</a></li>
      <li><a href="/news.html">News</a></li>
      <li><a href="/alumni.html">Alumni</a></li>
    </ul>
  </il-header-nav>
</il-header>

The header contains 5 slots for content:

The site-name slot contains the name of the site that is using the header. This can be a link to the site home page.
The primary-unit slot contains a link to the unit responsible for the site.
The navigation slot contains the main navigation for the site.
The search slot contains a form for searching the site.
The links slot contain a list of important site links.

Site name

For sites with multiple pages, the site name should be a link:

<a slot="site-name" href="/index.html">Header demonstration site</a>

For single-page sites, the preferred markup is the div element:

<div slot="site-name">Header demonstration site</div>

Primary unit

For sites that represent campus units (e.g. departments), the primary unit is the governing unit (e.g. college):

<a slot="primary-unit" href="https://example.com/">College of Demonstration</a>
<a slot="site-name" href="/index.html">Department of Examples</a>

If a site does not represent a specific campus unit, the primary unit is the campus unit which manages the site:

<a slot="primary-unit" href="https://example.com/">Department of Examples</a>
<a slot="site-name" href="/index.html">Example Resource Center</a>

Navigation

The main navigation contains 3 types of navigation items:

A link is a simple hyperlink to a page within the site.
A section groups other navigation items. Each section has a toggle that reveals or hides its contents.
A section with link has both a hyperlink and a toggle.

Navigation items are contained in unordered lists:

<il-header-nav slot="navigation">
  <ul>
    <li><a href="/about.html">About</a></li>
    <li><a href="/admissions.html">Admissions</a></li>
    <li><a href="/academics.html">Academics</a></li>
    <li><a href="/research.html">Research</a></li>
    <li><a href="/news.html">News</a></li>
    <li><a href="/alumni.html">Alumni</a></li>
  </ul>
</il-header-nav>

Sections can be used to create additional levels of navigation:

<il-header-nav slot="navigation">
  <ul>
    <li>
      <il-header-nav-section>
        <span slot="label">About</span>
        <ul>
          <li><a href="/about/history.html">History</a></li>
          <li><a href="/about/mission.html">Mission</a></li>
        </ul>
      </il-header-nav-section>
    </li>
    <li>
      <il-header-nav-section>
        <span slot="label">Academics</span>
        <ul>
          <li><a href="/academics/grad.html">Graduate Programs</a></li>
          <li><a href="/academics/undergrad.html">Undergraduate Programs</a></li>
        </ul>
      </il-header-nav-section>
    </li>
    <li>
      <il-header-nav-section>
        <span slot="label">Research</span>
        <ul>
          <li><a href="/research/centers.html">Centers</a></li>
          <li><a href="/research/awards.html">Awards</a></li>
        </ul>
      </il-header-nav-section>
    </li>
  </ul>
</il-header-nav>

Sections with links can also be used to create multiple navigation levels:

<il-header-nav slot="navigation">
  <ul>
    <li>
      <il-header-nav-section-with-link>
        <a slot="link" href="/about/index.html">About</a>
        <ul>
          <li><a href="/about/history.html">History</a></li>
          <li><a href="/about/mission.html">Mission</a></li>
        </ul>
      </il-header-nav-section-with-link>
    </li>
    <li>
      <il-header-nav-section-with-link>
        <a slot="link" href="/academics/index.html">Academics</a>
        <ul>
          <li><a href="/academics/grad.html">Graduate Programs</a></li>
          <li><a href="/academics/undergrad.html">Undergraduate Programs</a></li>
        </ul>
      </il-header-nav-section-with-link>
    </li>
    <li>
      <il-header-nav-section-with-link>
        <a slot="link" href="/research/index.html">Research</a>
        <ul>
          <li><a href="/research/centers.html">Centers</a></li>
          <li><a href="/research/awards.html">Awards</a></li>
        </ul>
      </il-header-nav-section-with-link>
    </li>
  </ul>
</il-header-nav>

Search

The search slot contains a complete form which can be used to search the site. An example search form:

<form slot="search" method="get" action="/search.php" role="search">
  <input type="search" name="search" aria-labelledby="search-button">
  <button id="search-button" type="submit">Search</button>
</form>

The search form can be customized as needed, with the following limits:

The form element must contain role="search".
The form must contains only 2 visible elements: an input for the search query and a submit button.

Links

The links slot contains a list of up to 3 links, wrapped in a nav element:

<nav slot="links" aria-label="Utility">
  <ul>
    <li><a href="/apply.html">Apply</a></li>
    <li><a href="/visit.html">Visit</a></li>
    <li><a href="/give.html">Give</a></li>
  </ul>
</nav>

The nav element must have an accessible name (e.g. "Utility").