Component

Header

Description

The Illinois Components Header defines an area at the top of the page which should contain (at a minimum) the site’s title. Navigation, search, and specialty links can also be included in the il-header component.

What it looks like

Example image (version 2.4, Dec. 8, 2021):

Try it out

• Header Component Builder: To see how it works with your own content and images
• Dev Codepen for Header: To experiment with all the code

Minimum viable header 

(In the examples below, replace bolded elements with your own content.)

At a minimum, you should include your site’s title and a link to the home page in your header:

<il-header>
  <div slot="wordmark">
    <il-unit-wordmark>
      <h1>Your site's title</h1>
    </il-unit-wordmark>
  </div>
</il-header>

Customizations and notes

Adding search and navigation

• You can add a basic Search element with <il-search slot="search"></il-search>. See the Search page for additional search customizations.
• How to build navigation with either single-level or unfolding menu options is described in the Menu Navigation page.

Specialty links 

• The “Apply / Donate / Contact” links at the top right of the screen shot above are links that this particular site has decided to handle separately from the rest of the menu system but still provide on every page of the site. “Log in” might be another specialty link to consider for this area.

Syntax guide

(In the examples below, replace elements in bold with your own content.)

The default syntax:

<il-header>
 <div slot="wordmark">
  <il-unit-wordmark>
   <h1>Your site's title</h1>
  </il-unit-wordmark>
 </div> 
</il-header>

Where to add elements:

<il-header>
<!-- Wordmark and title -->
 <div slot="wordmark">
  <il-unit-wordmark>
    <h1>Your site's title</h1>
  </il-unit-wordmark>
 </div> 
<!-- Search box: See Search -->
<!-- Specialty links: See syntax guide below -->
<!-- Site-wide navigation: See Menu Navigation -->
</il-header>

il-unit-wordmark

• Syntax:

<div slot="wordmark">
<il-unit-wordmark>
<h1>Your site's title</h1>
</il-unit-wordmark>
</div> 

• Usage:
  • The element <il-unit-wordmark> must be contained in a container (usually a div) identified with slot=”wordmark”.
  • <il-unit-wordmark> should contain an <h1> enclosing the site’s title.

• Default value: There is no default value.
• Required: Yes, you should put your site’s title in your header using this syntax.

Specialty links

• Syntax:

<nav slot="links" class="il-links" aria-label="Top">
 <ul>
  <li><a id="link-1" href="#">Apply</a></li>
  <li><a href="#">Donate</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</nav>

• Usage: 
  • A <nav> element is used to enclose an unordered list with your desired specialty links.
  • The nav element should contain:
    • slot="links" to identify this as the IL header specialty link collection
    • class="il-links" to apply the visual styling
    • aria-label="Top" to help with accessible navigation
• Default value: None
• Required: No

Navigation

• Syntax and details: See Menu Navigation for more information about how to construct your desired menu system using Illinois components.

About this component

• Type: Custom Element
• Introduced in: v2.3.0; 9/29/2021
• Deprecated?: No