npm package: @illinois-toolkit/ilw-header
Description: Header component for the Illinois Toolkit
Latest version: 1.5.1

# ilw-header

Links: **[ilw-header in Builder](https://builder3.toolkit.illinois.edu/component/ilw-header/index.html)** | 
[Illinois Web Theme](https://webtheme.illinois.edu/) | 
[Toolkit Development](https://github.com/web-illinois/toolkit-management)

## Overview

The standard campus header should appear at the top of every page of a campus website.
The header is placed in the header slot of the ilw-page component.

The header contains five content slots:

- The site name identifies the site. For multipage sites, this may also link to the front page of the site.
- The parent unit identifies the campus unit which manages the site or contains the unit represented by the site. This should link to the site for the parent unit.
- The navigation slot contains the main navigation component for the site.
- The search slot contains a basic search engine.
- The eyebrow slot contains links which are displayed in the top-right corner of the header.

## Attributes

* `menu`: If set to `none`, the menu will not appear. This will hide the menu button, the navigation slot, search slot, and eyebrow slot on both mobile and desktop versions. 
* `source`: The UTM source set for the header going back to the Illinois web site. Defaults to *Illinois_App*. 

## Site Name

For a single page site, the site name can be an `h1` or a `div` as required:

```html
<ilw-header slot="header">
  <div slot="site-name">Single-Page Website</div>
</ilw-header>
```
On sites with more than one page, the site name should link to the site homepage. If you use an `h1` for the site name for accessiblity, it should contain the link.

```html
<ilw-header slot="header">
  <a slot="site-name" href="/">Website with Multiple Pages</a>
</ilw-header>
```

```html
<ilw-header slot="header">
  <h1 slot="site-name"><a href="/">Website with Multiple Pages</a></h1>
</ilw-header>
```
## Parent unit

If the website represents a department within another unit, the parent unit `slot` can be used to link to an additional website for the parent unit:

```html
<ilw-header slot="header">
  <a slot="parent-unit" href="http://parent.example.com/">Parent Unit</a>
  <a slot="site-name" href="/">Website with Parent Unit</a>
</ilw-header>
```
## Navigation

The main navigation is a multi-level list of links that should not change within the site.

```html
<ilw-header slot="header">
  <ilw-header-menu slot="navigation">
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/academics">Academics</a></li>
      <li><a href="/research">Research</a></li>
      <li><a href="/alumni">Alumni</a></li>
    </ul>
  </ilw-header-menu>
</ilw-header>
```
For information, see the full documentation for the [ilw-header-menu](https://github.com/web-illinois/ilw-header-menu).

## Search

A simple search form can be added to the header via the search `slot`.

```html
<ilw-header slot="header">
  <form method="get" action="/search" slot="search" role="search">
    <input type="search" name="query" aria-labelledby="search-button">
    <button type="submit" id="search-button">Search</button>
  </form>
</ilw-header>
```
The following aspects of the markup are required:

- The form or div element must contain the search role
- The form or div element must contain the search slot
- The input type must be search
- The input must use the submit button for its accessible label.
- The submit button must contain an id linking it to the input.

A customized search form might include additional hidden inputs:

```html
<ilw-header slot="header">
  <form method="post" action="/search.php" slot="search" role="search">
    <input type="hidden" name="api-key" value="67890">
    <input type="search" name="q" aria-labelledby="search-button">
    <button type="submit" id="search-button" name="search" value="1">Search</button>
  </form>
</ilw-header>
```
### External References

[The Magnifying-Glass Icon in Search Design: Pros and Cons](https://www.nngroup.com/articles/magnifying-glass-icon/), Neilsen Norman Group, February 23, 2014

[Using aria-labelledby](https://www.w3.org/WAI/tutorials/forms/labels/#using-aria-labelledby)



## Links

The top-right section can be used for utility navigation:

```html
<ilw-header slot="header">
  <nav slot="links" aria-label="Utility">
    <ul>
      <li><a href="/apply">Apply</a></li>
      <li><a href="/visit">Visit</a></li>
      <li><a href="/donate">Donate</a></li>
    </ul>
  </nav>
</ilw-header>
```
- Link labels must be short. One-word labels are prefered.
- Limit links to 3 or fewer.
- Only one level of links is allowed. Additional levels of lists may not be displayed.
- The nav element must have an accessible name (e.g. "Utility").

## Form login and logout

Either the links slot or the search slot may contain login information for applications. If this is the case, you can use the following format

- A `<div>` or `<form>` with an appropriate aria-label attribute
- An optional `<span>` that has a the user that is logged in
- An `<a>` or `<button>` that goes to the application's login or logout area. This may be a submit form.
- If this is a form, you may include additional hidden form elements